Webpack 2 的 Babel 转换运行时问题

Question

下午好，

这与我在webpack's github 报告的问题相同，但我怀疑我可能是做错事的人，因此在这里提出一个问题。

我正在尝试用 Babel 配置 webpack 2，其中一项要求是转译诸如 Symbol 之类的内置函数。

尽管现在工作正常，但当我尝试使用 webpack 和 babel 的 transform-runtime 时，我无法使用 exports *。

输入文件 (src/index.js)：

export * from './secondFile'

secondFile.js：

export let TESTSYMBOL = Symbol('test');

export let TESTSYMBOL2 = Symbol('test2');

webpack.config.js（只复制了相关部分）：

module: {
    rules: [
        {
            test: /\.jsx?$/,
            // Skip any files outside of `src` directory
            include:path.resolve(__dirname, 'src'),
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ["es2015", "stage-3"],
                    plugins: ['transform-runtime']
                }
            }
        }
    ]
}

脚本：

"webpack -d --config config/webpack.config.js"

输出文件：gist

例外：

Uncaught ReferenceError: exports is not defined - at Object.defineProperty(exports, "__esModule", {

开发依赖：

• “webpack”：“2.6.1”，
• "webpack-dev-server": "2.4.5",
• “webpack-notifier”：“1.5.0”
• “babel-cli”：“6.24.1”，
• "babel-loader": "7.0.0",
• "babel-plugin-transform-runtime": "6.23.0",
• "babel-preset-es2015": "6.24.1",
• “babel-preset-stage-3”：“6.24.1”

依赖关系： - “babel-runtime”：“6.23.0”

感谢您的帮助！

Answer 1

看来问题出在include 上。由于某种原因，我无法使用path.resolve 或path.join。 webpack documentation 有这样的例子。

如果webconfig如下，就可以了：

 module: {
    rules: [
        {
            test: /\.js$/,
            include: [
                /src/
            ],
            // or exclude: [/node_modules/],
            use: 
                {
                    loader: 'babel-loader',
                    options: {
                        plugins: ['transform-runtime'],
                        presets: ['es2015', 'stage-3']

                    }
                }

        }
    ]
}

不管怎样，现在exports not defined 有一个问题，可以通过在 es2015 预设中将 modules 设置为 false 来解决（感谢 Github 的 Vanuan 的建议）：

presets: [['es2015', { modules: false }], 'stage-3'],

Answer 2

对于 IE 或更旧的浏览器，我需要使用 es-shims - 将 ECMAScript 规范移植到旧版 JS 引擎的库。

如果将以下这些库添加为 index.html（或等效项）的第一个导入，则可能会解决您的问题。举个例子：

<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script>

查看此链接了解您可能需要的每个库： ES-Shims