javascript - 출력 - 자바스크립트란




babel을 사용할 때 js가 필요합니까? (2)

ES6로 실험하고 있으며 Gulp를 사용하여 빌드하고 바벨을 사용하여 ES5로 변환합니다. 출력은 노드에서 실행되지 않고 태그가있는 .htm 파일에서 연결됩니다. 내가 추가해야한다고 생각합니다.

<script src='require.js'></script>

또는 그런 것.

가져 오기 / 내보내기를 시도하고 있습니다.

////////////////scripts.js
import {Circle} from 'shapes';

c = new Circle(4);

console.log(c.area());


/////////////////shapes.js
export class Circle {

    circle(radius) {
        this.radius = radius;
    }

    area() {
        return this.radius * this.radius * Math.PI;
    } 

}

오류는

Uncaught ReferenceError: require is not defined

이것을 참조하십시오 (gulp에서 .pipe (babel ()) 이후)

var _shapes = require('shapes');

babel을 사용할 때 js가 필요합니까?

일부 모듈 로더가 필요할 수 있지만 RequireJS는 필요하지 않습니다. 몇 가지 옵션이 있습니다. 다음은 시작하는 데 도움이됩니다.

rollup-plugin-babel rollup.js

롤업은 차세대 JavaScript 모듈 번 들러입니다. ES2015 모듈을 기본적으로 이해하며 작동하기 위해 모듈 로더가 필요하지 않은 번들을 생성합니다. 사용하지 않은 내보내기는 출력에서 ​​잘립니다 (트리 쉐이킹).

이제 개인적으로 rollupjs를 사용하는 것이 가장 좋습니다. 가장 명확한 출력을 생성하고 설정하기 쉽지만 답변에 다른 측면을 제공합니다. 다른 모든 접근 방식은 다음을 수행합니다.

  1. babel을 사용하여 ES6 코드를 컴파일하고 원하는 모듈 형식을 사용하십시오.
  2. 컴파일 된 모듈을 모듈 로더와 함께 연결하거나 종속성을 가로 지르는 번 들러를 사용하십시오.

rollupjs를 사용하면 실제로 이런 방식으로 작동하지 않습니다. 롤업은 babel 대신 첫 번째 단계입니다. 기본적으로 ES6 모듈 만 이해합니다. 종속성이 순회되고 연결될 입력 모듈을 제공해야합니다. ES6은 모듈에서 여러 개의 명명 된 내보내기를 허용하므로 rollupjs는 사용되지 않은 내보내기를 제거 할 수있을 정도로 똑똑하여 번들 크기가 줄어 듭니다. 불행히도 rollupjs-s 구문 분석기는> ES6 구문을 이해하지 못하므로 ES7 모듈은 롤업 구문 분석 전에 컴파일해야하지만 컴파일은 ES6 가져 오기에 영향을 미치지 않아야합니다. rollup-plugin-babel 플러그인을 babel-preset-es2015-rollup 사전 babel-preset-es2015-rollup 과 함께 사용하여 수행됩니다 (이 사전 설정은 모듈 변환기 및 외부 헬퍼 플러그인을 제외하고 es2015와 동일 함). 따라서 롤업은 올바르게 설정된 경우 모듈에서 다음을 수행합니다.

  1. 파일 시스템에서 ES6-7 모듈을 읽습니다.
  2. babel 플러그인은 메모리의 ES6으로 컴파일합니다.
  3. 롤업은 가져 오기 및 내보내기를 위해 ES6 코드를 구문 분석합니다 (도토리 파서를 사용하여 롤업으로 컴파일)
  4. 전체 그래프를 순회하고 단일 번들을 작성합니다 (여전히 외부 종속성이있을 수 있으며 항목의 내보내기를 선택한 형식으로 내보낼 수 있음)

nodejs 빌드 예제 :

// setup by `npm i rollup rollup-plugin-babel babel-preset-es2015 babel-plugin-external-helpers --save-dev`

// build.js:
require("rollup").rollup({
  entry: "./src/main.js",
  plugins: [
    require("rollup-plugin-babel")({
      "presets": [["es2015", { "modules": false }]],
      "plugins": ["external-helpers"]
    })
  ]
}).then(bundle => {
  var result = bundle.generate({
    // output format - 'amd', 'cjs', 'es6', 'iife', 'umd'
    format: 'iife'
  });

  require("fs").writeFileSync("./dist/bundle.js", result.code);
  // sourceMaps are supported too!
}).then(null, err => console.error(err));

grunt-rollup 사용한 예제 grunt 빌드

// setup by `npm i grunt grunt-rollup rollup-plugin-babel babel-preset-es2015 babel-plugin-external-helpers --save-dev`

// gruntfile.js
module.exports = function(grunt) {
  grunt.loadNpmTasks("grunt-rollup");
  grunt.initConfig({
    "rollup": {
      "options": {
        "format": "iife",
        "plugins": [
          require("rollup-plugin-babel")({
            "presets": [["es2015", { "modules": false }]],
            "plugins": ["external-helpers"]
          })
        ]
      },
      "dist": {
        "files": {
          "./dist/bundle.js": ["./src/main.js"]
        }
      }
    }
  });
}

gulp-rollup 사용한 예제 gulp 빌드

// setup by `npm i gulp gulp-rollup rollup-plugin-babel babel-preset-es2015 babel-plugin-external-helpers --save-dev`

// gulpfile.js
var gulp       = require('gulp'),
    rollup     = require('gulp-rollup');

gulp.task('bundle', function() {
  gulp.src('./src/**/*.js')
    // transform the files here.
    .pipe(rollup({
      // any option supported by Rollup can be set here.
      "format": "iife",
      "plugins": [
        require("rollup-plugin-babel")({
          "presets": [["es2015", { "modules": false }]],
          "plugins": ["external-helpers"]
        })
      ],
      entry: './src/main.js'
    }))
    .pipe(gulp.dest('./dist'));
});

Babelify + Browserify

바벨에는 Babelify 라는 깔끔한 패키지가 Babelify . 사용법은 간단하고 간단합니다.

$ npm install --save-dev babelify babel-preset-es2015 babel-preset-react
$ npm install -g browserify
$ browserify src/script.js -o bundle.js \
  -t [ babelify --presets [ es2015 react ] ]

또는 node.js에서 사용할 수 있습니다.

$ npm install --save-dev browserify babelify babel-preset-es2015 babel-preset-react

...

var fs = require("fs");
var browserify = require("browserify");
browserify(["./src/script.js"])
  .transform("babelify", {presets: ["es2015", "react"]})
  .bundle()
  .pipe(fs.createWriteStream("bundle.js"));

이것은 코드를 한 번에 번역하고 연결합니다. Browserify의 .bundle 에는 멋진 CommonJS 로더가 포함되어 있으며 변환 된 모듈을 함수로 구성합니다. 상대 수입품도 가질 수 있습니다.

예:

// project structure
.
+-- src/
|   +-- library/
|   |   \-- ModuleA.js
|   +-- config.js
|   \-- script.js
+-- dist/
\-- build.js
...

// build.js
var fs = require("fs");
var browserify = require("browserify");
browserify(["./src/script.js"])
  .transform("babelify", {presets: ["es2015", "react"]})
  .bundle()
  .pipe(fs.createWriteStream("dist/bundle.js"));

// config.js
export default "Some config";

// ModuleA.js
import config from '../config';
export default "Some nice export: " + config;

// script.js
import ModuleA from './library/ModuleA';
console.log(ModuleA);

컴파일하려면 프로젝트 루트에서 node build.js 를 실행 node build.js .

Babel + WebPack

babel을 사용하여 모든 코드를 컴파일하십시오. amd 모듈 변환기 (babel 6에서 babel babel-plugin-transform-es2015-modules-amd 라고 함)를 사용하는 것이 좋습니다. 번들 후 WebPack으로 컴파일 된 소스.

WebPack 2가 나왔습니다! 네이티브 ES6 모듈을 이해하고 babili -s 내장 데드 코드 제거를 사용하여 트리 흔들림 수행하거나 시뮬레이션 합니다. 지금은 (2016 년 9 월) WebPack 2의 첫 번째 릴리스에서 의견이 바뀔 수 있지만 babel과 함께 롤업을 사용하는 것이 좋습니다. 의견에 의견을 말하십시오.

맞춤 컴파일 파이프 라인

때로는 컴파일 프로세스를 더 많이 제어하려고합니다. 다음과 같이 자신의 파이프 라인을 구현할 수 있습니다.

먼저 amd 모듈을 사용하도록 babel을 구성해야합니다. 기본적으로 babel은 CommonJS 모듈로 변환합니다. 브라우저에서는 처리하기가 약간 복잡하지만 browserify는 좋은 방법으로 처리합니다.

  • 바벨 5 : { modules: 'amdStrict', ... } 옵션 사용
  • 바벨 6 : es2015-modules-amd 플러그인 사용

moduleIds: true 옵션을 켜는 것을 잊지 마십시오.

변환 된 코드에서 생성 된 모듈 이름을 확인하십시오. 종종 정의 된 모듈과 필수 모듈간에 불일치가 있습니다. sourceRoot 및 moduleRoot를 참조하십시오.

마지막으로, 어떤 종류의 모듈 로더가 있어야하지만, requirejs가 필요하지 않습니다. 잘 작동하는 작은 요구 almondjs 가 있습니다. 당신은 당신 자신의 것을 구현할 수도 있습니다 :

var __modules = new Map();

function define(name, deps, factory) {
    __modules.set(name, { n: name, d: deps, e: null, f: factory });
}

function require(name) {
    const module = __modules.get(name);
    if (!module.e) {
        module.e = {};
        module.f.apply(null, module.d.map(req));
    }
    return module.e;

    function req(name) {
        return name === 'exports' ? module.e : require(name);
    }
}

결국, 로더 shim과 컴파일 된 모듈을 함께 연결하고 uglify를 실행할 수 있습니다.

바벨의 상용구 코드는 모든 모듈에서 복제됩니다

기본적으로 위의 대부분의 메소드는 babel을 사용하여 각 모듈을 개별적으로 컴파일 한 다음 함께 연결합니다. 그것이 babelify도하는 일입니다. 그러나 컴파일 된 코드를 보면 babel이 각 파일의 시작 부분에 많은 상용구를 삽입한다는 것을 알 수 있습니다. 대부분의 파일이 모든 파일에 복제됩니다.

이를 방지하기 위해 babel-plugin-transform-runtime 플러그인을 사용할 수 있습니다.


브라우저에 require 가 없으므로이 오류가 예상됩니다. require.js 또는 Browserify와 같은 것을 사용해야합니다.





ecmascript-6