Webpack 2 的 Babel 转换运行时问题

Posted 2023-02-23

【中文标题】Webpack 2 的 Babel 转换运行时问题

【英文标题】：Babel Transform Runtime issue with Webpack 2

【发布时间】：2017-10-30 20:46:00

【问题描述】：

下午好，

这与我在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”

感谢您的帮助！

【参考方案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'],

【参考方案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

【讨论】：

我明白了。互联网浏览器只是一个例子。输出不同于手动运行 babel（这使得符号在 IE 等浏览器上工作。

但是非常感谢！这是一个需要牢记的方便资源

没问题。我会进一步寻找解决您的问题的方法。如果我找到了，我会在这里发布。

我想我发现了错误。我会更新答案！

这是我怀疑@Nimrod 的 webpack 配置错误