Webpack Babel-loader 使用 eval() 转译代码 [英] Webpack Babel-loader transpiles code with eval()

问题描述

我在使用 Webpack 和 Babel 时遇到了问题.我正在尝试将我的 JavaScript 代码转换成一个包文件.这是文件结构和片段:

I'm having an issue with Webpack and Babel. I'm trying transpile my JavaScript code into a bundle file. Here's the file structure and the snippets:

文件结构:

- src
| file.js
package.json
webpack.config.js

package.json:

{
  "name": "babel-webpack-starter",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode development"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "webpack": "^4.8.3",
    "webpack-cli": "^2.1.3",
    "webpack-dev-server": "^3.1.4"
  }
}

webpack.config.js:

const path = require('path');

module.exports = {
    entry: {
        app: './src/file.js'
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'app.bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['env']
                        }
                    }
                ]
            }
        ]
    }
}

当我输入webpack --mode development时，它在目录build中成功创建了文件app.bundle.js.

When I enter webpack --mode development, it creates the file app.bundle.js successfully inside the directory build.

然而，它似乎无法正常工作，因为在 build/app.bundle.js 的末尾，我正在寻找来自 src/file 的代码.js 我有以下内容:

However, it doesn't seem to be working properly, because at the end of build/app.bundle.js where I'm looking for the code from src/file.js I have the following :

/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

"use strict";
eval("\n\nvar fun = function fun() {\n  return console.log('Hello World');\n};\n\n//# sourceURL=webpack:///./src/file.js?");

/***/ })

奇怪的是，我不应该简单地拥有这个吗?

Which is strange, am I not supposed to simply have this instead?

/***/ (function(module, exports, __webpack_require__) {

"use strict";
let fun = () => console.log('Hello World')

/***/ })

配置有问题吗?

推荐答案

这其实不是因为 babel，而是因为 webpack.它需要一个名为 devtool 的选项来决定它是应该eval 代码还是使用某种源映射.

This is actually not because of babel, but because of webpack. It requires an option called devtool that decides whether it should eval the code or use some sort of source-map.

您可能正在寻找以下内容:

You might be looking for the following:

// webpack.config.js (excerpt)
module.exports = {
    // ...
    devtool: 'inline-source-map'
    // ...
};

inline-source-map 省略了 eval，而是在包中使用了一个很好的内联源映射.但是不要将它用于生产;-)

The inline-source-map omits eval in favor of a - well - inlined sourcemap inside the bundle. Do not use it for production, though ;-)

devtool 有几个选项，它们各有优缺点.有关该主题的更多信息，请参阅官方 webpack 文档.

There are several options for devtool that all have their advantages and disadvantages. For more information on the topic, please refer to the official webpack documentation.

这篇关于Webpack Babel-loader 使用 eval() 转译代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！