![](/img/trans.png)
[英]How to read a file from node_modules (custom module) like babel reading .babelrc files
[英]Babel doesn't process node_modules - no excludes, no .babelrc
这已被多次询问,问题总是归结为 babel 配置中存在exclude
,或者 babel 配置位于.babelrc
而不是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",
}
}
]
]
}
这是我的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;
当我在 IE11 中运行 output 包时,我看到一个箭头 function,它特别来自 package nanoid 。 正如你在上面看到的,我试图明确地include
它。 也尝试不include
。
我在 Babel 7.12 和 Webpack 5.4 上。
那么配置中还缺少什么? 为什么 babel 仍然拒绝解析(某些) node_modules
?
解决方案是按照@loganfsmyth 在上面评论中的建议删除include
,或者将include
设置为更通用的内容:
include: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules')]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.