Sam*_*Sam 7 webpack babeljs yarn-workspaces
我有一个 monorepo,使用yarn 2.4、webpack 和 babel 以及一个顶层babel.config.json,具有以下文件夹结构(稍微简化)
|-- .yarn
|-- package.json (top-level)
|-- babel.config.json
|-- tsconfig.json
|-- /* other config files... /
|-- modules
| |-- build
| | |-- build-system
| | | |-- package.json (module-level)
| | | |-- entry.js
| | | |-- webpack.js
| | | |-- /* source... */
| |-- /* other module folders... */
Run Code Online (Sandbox Code Playgroud)
我已将 ts/js 文件的 webpack 规则更改为以下内容:
{
test: /\.(j|t)sx?$/,
use: {
loader: "babel-loader",
options: {
babelrcRoots: ['../..'],
rootMode: 'upward',
},
}
}
Run Code Online (Sandbox Code Playgroud)
顶级package.json
{
"name": "workspace-example",
"version": "0.0.1",
"workspaces": [
"modules/build/*"
]
}
Run Code Online (Sandbox Code Playgroud)
模块级package.json
{
"name": "@workspace-example/build-system",
"version": "0.0.1",
"dependencies": {
"@babel/core": "^7.14.5",
"@babel/plugin-transform-runtime": "^7.14.5",
"@babel/preset-env": "^7.14.5",
"@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.14.5",
"@babel/runtime-corejs3": "^7.14.5",
"babel-loader": "^8.2.2",
"html-loader": "^2.1.2",
"pnp-webpack-plugin": "^1.6.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"typescript": "^4.3.2",
"webpack": "^5.38.1",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
},
"scripts": {
"build": "webpack --config source/webpack/webpack.js"
}
}
Run Code Online (Sandbox Code Playgroud)
这似乎正确地使其加载了 top-level babel.config.json,但是现在运行构建时,当它们位于模块级 package.json 时,它会在顶级 package.json 中查找依赖项,因此它会失败并显示以下内容错误:
Module build failed (from ../../../.yarn/$$virtual/babel-loader-virtual-7dc78877af/0/cache/babel-loader-npm-8.2.2-b4e600c2c5-362bb71573.zip/node_modules/babel-loader/lib/index.js):
Error: Your application tried to access @babel/plugin-transform-runtime, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.
Required package: @babel/plugin-transform-runtime (via "@babel\plugin-transform-runtime")
Required by: C:\code\webpack-5-yarn\
Run Code Online (Sandbox Code Playgroud)
这些依赖项是在模块级 package.json 中定义的,但它正在查看顶级 package.json,而我不认为它应该如此。
将顶层babel.config.json移至.babelrc构建系统模块并从 babel loader 规则中删除两个选项是可行的(由于某种原因,保留名称babel.config.json不起作用)。但我正在寻找一个可以使用单个顶级 babel.config.json 的解决方案。
我对 webpack 4 和yarn 1 有相同的解决方案,没有问题。
编辑:
在模块目录中使用 .babelrc 时,我可以从模块级 package.json 中删除所有依赖项,并且不会出现错误Error: Your application tried to access @babel/plugin-transform-runtime, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.
当我认为这应该是同一个问题时,不知道为什么我不会。
编辑2: 我似乎通过完全删除 babel.config.json 文件并将配置直接添加到 webpack 文件中来部分工作,如下所示:
{
test: /\.(j|t)sx?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
root,
presets: [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript"
],
plugins: [
[
"@babel/plugin-transform-runtime",
{
regenerator: true,
corejs: 3
}
]
]
},
}
}
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
1654 次 |
| 最近记录: |