Webpack Babel-loader переносит код с помощью eval ()
У меня проблема с Webpack и Babel. Я пытаюсь преобразовать свой код JavaScript в файл пакета. Вот файловая структура и фрагменты:
файловая структура:
- 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, он успешно создает файл app.bundle.js в каталоге build.
Однако, похоже, он не работает должным образом, потому что в конце build/app.bundle.js, где я ищу код из src/file.js, у меня есть следующее:
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
eval("\n\nvar fun = function fun() {\n return console.info('Hello World');\n};\n\n//# sourceURL=webpack:///./src/file.js?");
/***/ })
Что странно, разве я не должен просто иметь это вместо этого?
/***/ (function(module, exports, __webpack_require__) {
"use strict";
let fun = () => console.info('Hello World')
/***/ })
Есть проблема с конфигом?
Ответы 2
После бесчисленных часов исследований я наконец нашел решение, предустановку, которую нужно использовать, - это babel-preset-env и не env.
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: ['babel-preset-env'] // <-- here
}
}
]
}
]
}
}
@ColinD Да, ты можешь
На самом деле это не из-за babel, а из-за webpack. Для этого требуется опция devtool, которая решает, следует ли eval использовать код или использовать какую-то карту источников.
Возможно, вы ищете следующее:
// webpack.config.js (excerpt)
module.exports = {
// ...
devtool: 'inline-source-map'
// ...
};
inline-source-map опускает eval в пользу хорошо встроенной исходной карты внутри пакета. Однако не используйте его для производства ;-)
Существует несколько вариантов devtool, каждый из которых имеет свои преимущества и недостатки. Для получения дополнительной информации по теме обратитесь к официальная документация webpack.
Это фактический ответ, который сработал для меня, а не ответ OP ниже этого. По умолчанию devtool равно eval.
Извините за предположение, но нельзя ли также использовать .babelrc?