如何全局公开 es6 模块

Question

我需要编写一个可在全局窗口中使用的模块。
我使用 es6 创建模块，我定义的每个类都有自己的文件。
我正在使用 webpack 对这些类进行 babelify 和捆绑。
我的模块的入口点也是包含要公开的全局的文件。

我已经尝试了所有方法来实现这一点，包括：

• 暴露加载器
• 导入加载器
• 出口商加载器
• 输出：库
• 黑魔法:(

我尝试过的代码示例：

我想得到：window.MyMod

// mymod.js
export class MyMod {
    constructor(aaa) {
        this.aaa = aaa;
    }
    toString() {
        return this.aaa;
    }
}

// webpack.config
var entries = [
    './src/mymod.js'
];
module.exports = {
    ...,
    module: {
      loaders: [
            {
                test: require.resolve('./src/mymod.js'),
                loader: 'expose?MyMod'
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                }
            }
    ]
}

这只会在包含 MyMod 作为构造函数的窗口上为我获取一个对象 MyMod。

任何帮助将不胜感激。

Answer 1

您应该在 Webpack 的配置中将 export default class Foo 与 library 和 libraryTarget 设置结合起来。比如：

// src/Foo.js
export default class Foo { ... }

// webpack.config.json
{
  "output": {
    "library": "Foo",
    "libraryTarget": "var"
  }
}

加载包后，您应该能够以window.Foo 的身份使用该库。

Answer 2

这与Exporting a class with Webpack and Babel not working 基本上是相同的问题，除了您有一个命名导出而不是默认导出。你的入口文件应该是

import {MyMod} from './mymod';
module.exports = MyMod;

或

module.exports = require('./mymod').MyMod;

---

如果您不想执行任何这些操作并将'./src/mymod.js' 作为入口文件，请在该文件中使用 CommonJS 导出而不是 ES6 导出：

// mymod.js
exports.MyMod = class MyMod {
    constructor(aaa) {
        this.aaa = aaa;
    }
    toString() {
        return this.aaa;
    }
}