gulp - 개념 - 바벨 로더




밑줄의 "this"는 browserify 및 debowerify로 컴파일 한 후 정의되지 않습니다. (2)

필자의 경우 browserify를 밑줄과 함께 사용하면 같은 에러가 발생했다. 밑줄에서 로다 쉬로 전환하여 문제를 해결했습니다. 그들은 일반적으로 (확실하게 완전하게는) 호환되지 않지만, 최악의 경우에는 분리 된 부하 접근법을 사용하는 것보다 언더 코어 소스에서 누락 된 일부 기능을 복사하려고합니다.

그래서 처음에 .. 나는 다음에 꿀꺽 거리는 일이있다.

gulp.task('js', function() {
    browserify('./src/js/main.js')
        .bundle()
        .on('error', onError)
        .pipe( source('main.js') )
        .pipe( gulp.dest(path.build.js) );
});

및 package.json :

{
  "browserify": {
    "transform": [
      ["babelify", { "presets": ["es2015"] }],
      "debowerify"
    ]
  },
}

main.js에서 백본을 가져오고 있습니다 (또는 밑줄 만 ... 중요하지 않습니다).

import Backbone from 'backbone';

콘솔에서 오류가 발생했습니다.

잡히지 않은 TypeError : 정의되지 않은 '_'속성을 읽을 수 없습니다.

코드를 검사 한 결과, 라이브러리 root 시작 부분에있는 밑줄의 소스가 정의되지 않았 음을 알았습니다.

 // Establish the root object, `window` in the browser, or `exports` on the server.
  var root = this;

  // Save the previous value of the `_` variable.
  var previousUnderscore = root._;

문제는 debowerify 또는 babelfy가 일부 기능에서 코드를 래핑한다는 것입니다. 또한 debowerify없이 노드 모듈을 사용하면 모든 것이 잘 동작합니다. 하지만 정자를 사용하고 싶습니다.

어떻게이 문제를 해결할 수 있을까요?


이 질문에 대한 앞으로의 모든 방문객에게,

이것은 Webpack과 번들링 할 때 언더 코어가 오류를 발생시키는 것과 유사합니다.

문제의 요지는 babel이 underscore.js 코드를 실행하고 있다는 것입니다. underscore.js가 this 사용하고 있기 때문에 es6에서 this 함수 외부에서 정의되지 않습니다. 당연히 this._ 가 실패합니다.

코드에서 babel이 node_modules에서 실행되지 않도록하여이 문제를 해결했습니다.