首页 文章

Babpack转换运行时问题与Webpack 2

提问于
浏览 次
1

下午好，

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

我正在尝试使用 Babel 配置 webpack 2 ，其中一个要求是转换内置函数，例如 Symbol .

尽管现在工作正常，当我尝试使用webpack和babel 's transform-runtime, I' m无法使用 exports * .

Input file （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']
                }
            }
        }
    ]
}

script ：

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

Output file ：gist

Exception ：

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

Dev Dependencies:

  • "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"

Dependencies: - "babel-runtime"："6.23.0"

谢谢你的帮助！

javascript webpack ecmascript-6 babeljs

2 回答

  • 3

    似乎问题出在 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预设中将模块设置为false来解决（感谢Github上的Vanuan提供的建议）：

    presets: [['es2015', { modules: false }], 'stage-3'],
    回复于
  • 0

    对于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

    回复于

相关问题