[英]Babel doesn't process node_modules - no excludes, no .babelrc
This has been asked multiple times, and the issues always comes down to either a presence of exclude
in babel config, or babel config being in .babelrc
instead of babel.config.json
.这已被多次询问,问题总是归结为 babel 配置中存在
exclude
,或者 babel 配置位于.babelrc
而不是babel.config.json
中。 In my case it's something else.就我而言,这是另一回事。 Here's my
babel.config.json
:这是我的
babel.config.json
:
{
"presets": [
[
"@babel/preset-react",
{
"runtime": "automatic"
}
],
"@babel/env"
],
"plugins": [
"@babel/plugin-proposal-object-rest-spread",
[
"module-resolver",
{
"alias": {
"@common": "./src/common",
"@files": "./src/files",
"@settings": "./src/settings",
}
}
]
]
}
Here's my webpack.config.js
这是我的
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const ENV = process.env;
const scriptDir = path.join(__dirname, 'scripts');
const config = {
devtool: ENV.WEBPACK_DEVTOOL || 'eval-source-map',
mode: 'development',
entry: {
app: ['./src/app.js'],
},
output: {
path: scriptDir,
publicPath: '/',
},
target: ['web', 'es5'],
module: {
rules: [
{
test: path.resolve(__dirname, 'node_modules/ajv'),
use: 'null-loader',
},
{
test: /\.(js|cjs|jsx)$/,
use: ['babel-loader'],
include: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules/nanoid')],
},
{
test: /\.json$/,
use: ['json-loader'],
type: 'javascript/auto',
},
{
test: /\.css/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.min\.js$/,
exclude: [/react/, /node_modules/],
use: ['script-loader'],
},
{
test: /node_modules\/vfile\/core\.js/,
use: [
{
loader: 'imports-loader',
options: {
type: 'commonjs',
imports: ['single process/browser process'],
},
},
],
},
],
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(ENV.NODE_ENV),
}),
],
resolve: {
symlinks: false,
modules: [path.join(__dirname, 'src'), 'node_modules'],
alias: {
'@common': path.resolve(__dirname, './src/common'),
'@files': path.resolve(__dirname, './src/files'),
'@settings': path.resolve(__dirname, './src/settings'),
},
fallback: {fs: false, path: require.resolve('path-browserify')},
},
};
if (ENV.NODE_ENV === 'production') {
config.devtool = 'hidden-source-map';
config.mode = 'production';
}
if (ENV.WEBPACK_PLUGIN) {
const Plugin = require(ENV.WEBPACK_PLUGIN);
config.plugins.push(new Plugin());
}
module.exports = config;
When I run the output bundle in IE11, I'm seeing an arrow function, and it comes specifically from package nanoid .当我在 IE11 中运行 output 包时,我看到一个箭头 function,它特别来自 package nanoid 。 As you see above, I tried to explicitly
include
it.正如你在上面看到的,我试图明确地
include
它。 Tried without the include
as well.也尝试不
include
。
I'm on Babel 7.12 and Webpack 5.4.我在 Babel 7.12 和 Webpack 5.4 上。
So what is still missing in the config?那么配置中还缺少什么? Why is babel still refusing to parse (some of the)
node_modules
?为什么 babel 仍然拒绝解析(某些)
node_modules
?
The solution was either to remove the include
as suggested by @loganfsmyth in the comments above, or to set include
to something more general:解决方案是按照@loganfsmyth 在上面评论中的建议删除
include
,或者将include
设置为更通用的内容:
include: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules')]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.