Webpack 4 - 将变量暴露给全局上下文答案

【问题标题】：Webpack 4 - Exposing variable to global contextWebpack 4 - 将变量暴露给全局上下文
【发布时间】：2018-03-18 17:47:35
【问题描述】：

我正在制作一个用 ES6 编写的库，并将使用 Babel 将其转换为过去的版本，以避免 EcmaScript 不兼容。

class MyLib {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    return `Hello ${this.name}`;
  }
}

// Would this work / is this the right way?
// window.MyLib = MyLib

module.exports = MyLib;

这个库必须在全局范围内，因为用户不需要从任何地方导入它，甚至有一个简单的 HTML + CSS 结构，而无需配置像 webpack 这样的捆绑器的开销.

让这个库在全局范围内可用的“正确方法”是什么？

module.exports 之前的 window.MyLib = MyLib 会起作用还是正确的做法？

【问题讨论】：

标签： javascript web webpack ecmascript-6 bundler

【解决方案1】：

因此我配置了我的“webpack.config.js”文件：

const path = require("path");

module.exports = {
    mode: "production",
    entry: "./index.js",
        output: {
        path: path.resolve(__dirname, "build/"),
        filename: "out_file_name.js",
        libraryTarget: 'umd',
        globalObject: 'this',
        libraryExport: 'default',
        library: 'libraryName'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: "babel-loader",
                    options: {
                        cacheDirectory: true,
                        presets: ["babel-preset-env"]
                    }
                }
            },
        ]
    }
};

在“index.js”文件中：

function createLibraryName() {
    return {
        func1: () => {},
        func2: () => {},
        //...
    };
}

export default createLibraryName();

这样我可以像这样访问库：

libraryName.func1();
libraryName.func2();

【讨论】：