Как экспортировать класс ES6 с помощью Webpack и Babel в AMD

Я пытаюсь написать класс в ES6 и передать его в библиотеку как модуль AMD с Babel (и пакет с jQuery в том же файле), чтобы люди могли использовать его как это:Как экспортировать класс ES6 с помощью Webpack и Babel в 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 */ 
    } 
}

и 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:

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

И я постоянно получаю эту ошибку:

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

Может кто-нибудь, пожалуйста, помогите мне и скажите мне, что пошло не так, и я могу это исправить? AMD больше относится к моим предпочтениям, поэтому, если у кого-то есть решение, которое использует CommonJS и делает то же самое, я открыт для него.

Редактировать: Чтобы избежать отвлечения внимания, эта проблема не имеет ничего общего с Webpack, поскольку я использовал команду babel --presets es2015 --plugins transform-es2015-modules-amd js/main.js -o dist/Foo.bundle.js и по-прежнему имею ту же ошибку.

источник

2017-02-08 kevguy

Возможно, мне что-то не хватает, но почему вы используете webpack с AMD? Webpack - это * bundler *, а AMD для загрузки асинхронного скрипта ... кажется мне с вашим '.babelrc', что вы можете просто пропустить webpack? –

Поскольку 'Class' является синтаксисом ES6, поэтому я хочу передать его ES5 с помощью babel, поэтому большинство браузеров все еще могут его поддерживать. Я попробовал транспиляцию без использования Webpacj, но с командой 'babel --presets es2015 --plugins transform-es2015-modules-amd js/main.js -o dist/Foo.bundle.js', но она по-прежнему дает мне ту же ошибку. – kevguy

Бросок случайных инструментов сборки при ошибках, которые вы не понимаете, не будет их исправлять. Итак, давайте начнем с самого начала: вы включаете 'require.js' в тег скрипта на своей странице? Как выглядит ваш порядок загрузки? Замечание: если у вас есть '.babelrc', почему вы вручную передаете параметры CLI? И последнее, но не менее важное: если вы намерены опубликовать это как * библиотеку *, вы должны использовать UMD для максимальной простоты использования. –

-1

Я не знаю, что это неправильно в вашем, но мой путь ниже:

установить JQuery

npm i jquery;

затем настроить webpack.conf

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

...

и импорта 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

Как экспортировать класс ES6 с помощью Webpack и Babel в AMD

ответ

Смежные вопросы