当我单独运行 babel 时,它会读取 .babelrc
并按预期进行转译。但是,当我使用 webpack
和 babel-loader
运行 webpack 时,它不起作用。
.babelrc
{
"presets": ["env"]
}
webpack.config.js
module.exports = {
entry: __dirname + '/src/index.js',
output: {
filename: 'bundle.js',
publicPath: '/dist',
path: __dirname + '/dist'
},
module: {
loaders: [
{
test: /\.js?/,
include: __dirname + 'src',
loader: 'babel-loader'
}
]
},
devServer: {
inline: true,
port: 8080,
historyApiFallback: {
index: 'index.html'
}
}
}
最佳答案
我遇到了类似的问题,这就是我发现的。在 .babelrc
debug
选项
{
"presets": [
["env", {
"targets": {
"browsers": ["last 2 versions", "IE >= 8"]
},
"debug": true
}]
]
}
显示浏览器有效:
Using targets: { "chrome": "61", "android": "4.4.3", "edge": "15", "firefox": "56", "ie": "8", "ios": "10.3", "safari": "10.1" }
Modules transform: commonjs
Using plugins: check-es2015-constants {"android":"4.4.3","ie":"8"}
transform-es2015-arrow-functions {"android":"4.4.3","ie":"8"}
transform-es2015-block-scoped-functions {"android":"4.4.3","ie":"8"}
transform-es2015-block-scoping {"android":"4.4.3","ie":"8"}
transform-es2015-classes {"android":"4.4.3","ie":"8"}
transform-es2015-computed-properties {"android":"4.4.3","ie":"8"}
transform-es2015-destructuring {"android":"4.4.3","edge":"15","ie":"8"}
transform-es2015-duplicate-keys {"android":"4.4.3","ie":"8"}
transform-es2015-for-of {"android":"4.4.3","ie":"8"}
transform-es2015-function-name {"android":"4.4.3","edge":"15","ie":"8"} ...
我的 webpack 配置看起来只是
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
}
但这并不能解决所有问题。调查转译后的分配,我找不到一些预期的东西,比如 Array.prototype.reduce
的 polyfill 应该为 IE 8 进行 polyfill。但这个想法是(据我所知)它不是babel-core
转译器的责任。我们需要使用 babel-polyfill或 core-js .因此,在 webpack 配置中进行 polyfilling 是一项单独的任务,在 .babelrc
中设置 browsers
选项只是故事的一部分。
另请参阅 GitHub 上的相关主题和 StackOverflow .
关于javascript - Webpack babel-loader 没有读取 .babelrc,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47107435/