我正在开发一个核心库,可以在其中克隆和附加不同的组件。每个组件目录都有一个 package.json 文件。我的核心是使用 webpack,当我运行构建命令时,它会抛出这样的错误
ERROR in ./src/clients/products/src/Products.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/mughees/Desktop/midgard-react/src/clients/products/src/Products.js: Unexpected token (46:17)
如果我从 subrepo/module 中删除 package.json,它可以正常编译。
这是我现在的 webpack。
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: ["babel-polyfill", "./src/index.js"] ,
mode: "development",
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: "babel-loader",
options: { presets: ["@babel/env"] }
},
{
test: /\.(css|scss)$/,
use: [
"style-loader",
"css-loader",
"sass-loader"
]
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
"file-loader",
{
loader: "image-webpack-loader",
options: {
bypassOnDebug: true,
disable: true,
},
},
],
}
]
},
resolve: {
extensions: ["*", ".js", ".jsx"],
modules: [path.resolve(__dirname, './src'), 'node_modules'],
alias: {
store: path.resolve(__dirname, './src/store'),
}
},
output: {
path: path.resolve(__dirname, "dist/"),
publicPath: "/dist/",
filename: "bundle.js"
},
devServer: {
contentBase: path.join(__dirname, "public/"),
port: 3000,
publicPath: "http://localhost:3000/dist/",
historyApiFallback: true,
hotOnly: true
},
plugins: [new webpack.HotModuleReplacementPlugin()]
};
最佳答案
问题与 babel 有关,与 webpack 无关。我有它 before .
这是一个测试,在运行 webpack 后,它会抛出如下错误:
ERROR in ./home/three-JSX-main-patterns.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /var/www/html/ir/jsfun/home/three-JSX-main-patterns.js: Unexpected token (5:27)
并在我的案例中提示 JSX
solution
您的用例是什么?
- 您想以编程方式创建配置吗?
你想编译 node_modules 吗?
babel.config.js is for you!
您是否有仅适用于您的简单单个包的静态配置?
.babelrc is for you!
在我的例子中,我有这样的 .babelrc
:
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
}
然后我将它替换为 babel.config.js
,如下所示:
module.exports = function (api) {
api.cache(true);
const presets = ["@babel/preset-env", "@babel/preset-react"];
return {
presets
};
}
而且效果很好。
关于webpack - 如何忽略 subrepo 中的 package.json,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55396693/