Webpack 및 Babel을 사용하여 ES6 클래스를 AMD

으로 내보내는 방법 저는 ES6에 클래스를 작성하고 Babel을 사용하여 AMD 모듈 (그리고 jQuery와 같은 파일에 번들)로 라이브러리에 트리밍하려고합니다.Webpack 및 Babel을 사용하여 ES6 클래스를 AMD

<script src="Foo.js"></script> 
<script> 
    var dummy = new Foo(); 
</script>

내가 솔루션 here을 따라이 같은 내 폴더 정리 : 다음과 같이 사용

-dist 
-js 
    |--Foo.js 
    |--main.js 
-lib 
    |--jquery.js 
-node_modules 
-webpack.config.js 
-.babelrc 
-.eslintrc 
-package.json

및 Foo.js :

import $ from '../lib.jquery.js'; 

export default class Foo { 
    constructor(){ 
     /* jQuery stuff */ 
    } 
}

0123을

및 main.js :

module.exports = require('./Foo.js').default;

및 webpack.config.js :

require('babel-polyfill'); 
const path = require('path'); 
const webpack = require('webpack'); 

module.exports = { 
    name: "bundle-js", 
    entry: { 
     Foo: [ 
      // configuration for babel6 
      'babel-polyfill', 
      './js/main.js' 
     ] 
    }, 
    output: { 
     path: path.resolve(__dirname, 'dist'), // ./build 
     filename: '[name].bundle.js', 
     library: 'Foo', 
     libraryTarget: 'umd' 
    }, 
    module: { 
     rules: [{ 
      test: /\.js$/, 
      loader: ['babel-loader', 'eslint-loader'], 
      exclude: /node_modules/, 
     }] 
    }, 
    stats: { 
     colors: true 
    }, 
    devtool: 'source-map' 
};

및 .babelrc :

js/main.js: Property object of MemberExpression expected node to be of a type ["Expression"] but instead got null

{ 
    "plugins": ["transform-es2015-modules-amd"], 
    "presets": ["react", "es2015","stage-0"] 
}

는 그리고이 오류가 계속

누가 도와 주시겠습니까? 그리고 무엇이 잘못되어서 고칠 수 있습니까? AMD는 내가 더 좋아하기 때문에, 누군가 CommonJS를 사용하는 솔루션을 가지고 있고 똑같은 일을한다면, 나는 그것에 대해 개방적이다.

편집 :주의 분산을 피하기 위해이 문제는 Webpack과 아무 관련이 없습니다. babel --presets es2015 --plugins transform-es2015-modules-amd js/main.js -o dist/Foo.bundle.js 명령을 사용했지만 여전히 동일한 오류가 있습니다.

나는 당신의 잘못하지만 내 방법은 다음과 같습니다 모르는

출처

2017-02-08 kevguy

아마도 여기에 뭔가 빠졌 겠지만, 왜 AMD에서 webpack을 사용하고 있습니까? Webpack은 * bundler *이고, AMD는 비동기 스크립트 로딩을하고 있습니다 ... .babelrc를 사용하면 webpack을 건너 뛸 수 있다고 생각합니까? –

'Class'는 ES6 문법이기 때문에, 나는 그것을 바벨과 함께 ES5로 옮겨서 대부분의 브라우저가 여전히 그것을 지원할 수 있도록하고 싶다. 나는 Webpacj를 사용하지 않고 transpilation을 시도했지만'babel --presets es2015 --plugins transform-es2015-modules-amd js/main.js -o dist/Foo.bundle.js' 명령을 사용했지만 여전히 동일한 오류를 표시합니다. – kevguy

당신이 이해하지 못하는 오류가 발생했을 때 무작위 빌드 툴을 던져도 문제가 해결되지는 않습니다. 처음부터 시작하자. 페이지의 스크립트 태그에'require.js'를 포함하고 있습니까? 로드 순서는 어떻게 생겼습니까? 참고 :'.babelrc'가 있다면 왜 수동으로 CLI 매개 변수를 전달합니까? 마지막으로 중요한 점은, * 라이브러리 *로 공개하려는 의도가 있다면 UMD를 사용하는 것이 가장 바람직하다는 것입니다. –

-1

것은

npm i jquery;

다음 webpack.conf에게

resolve: { 
    alias: { 
     $: "jquery", 
     jQuery: "jquery", 
    }, 
... 
// for jquery plugins 
new webpack.ProvidePlugin({ 
    'jQuery': 'jquery', 
    'window.jQuery': 'jquery', 
    'window.$': 'jquery', 
}), 

...

수입 jQuery를 구성 NPM을 통해 jQuery를 설치

import $ from 'jquery';

출처

2017-02-08 12:55:58

jQuery와는 아무런 관련이 없다고 생각합니다. 'import $ from'../ lib.jquery.js ';'문없이 똑같은 작업을 시도했지만 여전히 같은 오류가 있습니다. – kevguy

이것은 AMD 트랜스포머 플러그인의 문제점입니다. 포함하려는 대상은 처리 할 수없는 require을 사용합니다. 자세한 내용은 this github 문제를 참조하십시오. 대신 UMD 플러그인을 사용해보십시오. 특히이 라이브러리를 라이브러리로 공개하고 싶다고 말한 이후입니다.

출처

2017-02-08 14:12:28

Webpack 및 Babel을 사용하여 ES6 클래스를 AMD

답변

관련 문제