Question

我正在尝试在ES6中编写一个类，并将其作为带有Babel的AMD模块（并在同一文件中与jQuery捆绑）将其转换为库，以便人们可以像这样使用它：

<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仍然有相同的错误。

Answer 1

这是AMD变压器插件的问题，您尝试使用它无法处理的require。有关详细信息，请参阅this github问题。请尝试使用UMD插件，特别是因为您说要将其作为库发布。

Answer 2

我不知道你的错是什么，但我的方式如下：

通过npm安装jquery

SELECT Staffname, COUNT(*) as numOrders,
       SUM(CASE WHEN OrderComplete = 0 THEN 1 ELSE 0 END) as IncompleteOrders,
       SUM(CASE WHEN OrderComplete = 1 THEN 1 ELSE 0 END) as CompleteOrders,
       AVG(CASE WHEN OrderComplete = 1 THEN 1.0 ELSE 0 END) as CompleteOrders_proportion
FROM OrderTable ot
GROUP BY staffname;

然后配置webpack.conf

npm i jquery;

并导入jquery

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

...

如何将带有Webpack和Babel的ES6类导出到AMD

2 个答案: