我sharedlib在 .babel 根目錄之外有一個組件project1。以前用webpack打包這個專案沒有問題，但是在配置babel的時候出現如下錯誤：
Asset Size Chunks Chunk Names
lib1.out.js 63.1 KiB main [emitted] main
lib1.out.js.map 43.2 KiB main [emitted] [dev] main
Entrypoint main = lib1.out.js lib1.out.js.map
[../sharedlib/index.js] 43 bytes {main} [built]
[../sharedlib/util.js] 554 bytes {main} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]
[./src/lib1.js] 435 bytes {main} [built]
56 hidden modules
ERROR in ../sharedlib/util.js
Module not found: Error: Can't resolve '@babel/runtime-corejs3/core-js-stable/promise' in 'D:\test_babel\sharedlib'
@ ../sharedlib/util.js 3:0-69 13:13-21
@ ../sharedlib/index.js
@ ./src/lib1.js
ERROR in ../sharedlib/util.js
Module not found: Error: Can't resolve '@babel/runtime-corejs3/helpers/classCallCheck' in 'D:\test_babel\sharedlib'
@ ../sharedlib/util.js 1:0-76 7:4-19
@ ../sharedlib/index.js
@ ./src/lib1.js
ERROR in ../sharedlib/util.js
Module not found: Error: Can't resolve '@babel/runtime-corejs3/helpers/createClass' in 'D:\test_babel\sharedlib'
@ ../sharedlib/util.js 2:0-70 10:2-14
@ ../sharedlib/index.js
@ ./src/lib1.js
重現問題的demo專案在github https://github.com/xybei/test_babel
我的專案目錄是這樣的：
ROOT
├─project1
│ │ babel.config.js
│ │ demo.html
│ │ demo.js
│ │ package-lock.json
│ │ package.json
│ │ webpack.config.js
│ │
│ ├─node_modules
│ └─src
│ lib1.js
│
└─sharedlib
index.js
util.js
package.json
這是project1/package.json，我已配置sharedlib為本地模塊"sharedlib": "file:../sharedlib"
{
"name": "lib1.js",
"version": "1.0.0",
"description": "test project1",
"main": "lib1.js",
"dependencies": {
"@babel/runtime-corejs3": "^7.18.3",
"sharedlib": "file:../sharedlib"
},
"devDependencies": {
"@babel/core": "^7.18.2",
"@babel/plugin-transform-runtime": "^7.18.2",
"@babel/preset-env": "^7.18.2",
"babel-loader": "^8.2.5",
"babel-loader-exclude-node-modules-except": "^1.2.1",
"webpack": "^4.39.3",
"webpack-cli": "^3.3.8"
},
"scripts": {
"clean": "rimraf dist",
"prebuild": "npm run clean",
"prerelease": "npm run clean",
"build": "webpack --mode development",
"release": "webpack --mode production"
}
}
webpack.config.js
const path = require('path');
module.exports = {
devtool: 'source-map',
entry: './src/lib1.js',
output: {
path: __dirname,
filename: `lib1.out.js`,
library: 'Lib1',
libraryTarget: 'umd',
libraryExport: 'default',
globalObject: 'this',
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /node_modules/,
// include: [
// path.resolve(__dirname, 'src'),
// path.resolve(__dirname, 'node_modules/sharedlib')
// ],
use: {
loader: "babel-loader"
}
}
]
}
};
如果我注釋掉exclude放開include，編譯將不再報錯，但是util.js打包后的檔案沒有被轉譯，依然是ES6代碼。這與我的預期相反。為什么node_modules/sharedlib目錄是included，但是里面的檔案沒有被轉譯？
babel.config.js
module.exports = {
presets: [
["@babel/preset-env",
{
targets: {
ie: 10
},
debug: true
}]
],
plugins: [
[
"@babel/plugin-transform-runtime", {
corejs: 3
}
]
]
};
sharedlib來自第三方，我不想修改安裝@babel/runtime-corejs3在它的目錄下，我可以修改我的配置project1來轉譯sharedlib代碼嗎？感謝幫助！
uj5u.com熱心網友回復：
添加@babel/runtime-corejs3到您的sharedlibpackage.json 依賴項。
{
"name": "sharedlib",
"version": "1.0.0",
"description": "test sharedlib",
"main": "index.js",
"module": "index.js",
"dependencies": {
"@babel/runtime-corejs3": "^7.18.3"
}
}
當你使用 Babel 的時候@babel/plugin-transform-runtime，你需要給專案添加合適的運行時依賴。對于corejs: 3選項，您需要@babel/runtime-corejs3. 查看您需要額外安裝以使其運行所需的依賴項。
此外，您應該使用包匯入而不是相對匯入：
// Instead of this:
import { Util } from '../../sharedlib';
// Use this:
import { Util } from 'sharedlib';
此外，您需要將其安裝在sharedlib檔案夾中node_modules，因為這是util.js檔案所在的位置。
不修改sharedlib
要在不修改sharedlib package.json檔案的情況下完成這項作業，請讓 Webpack 意識到@babel/runtime-corejs3使用resolve.alias. 修改并添加以下內容webpack.config.js：
module.exports = {
// Other Webpack configuration
resolve: {
alias: {
'@babel/runtime-corejs3': path.resolve(__dirname, './node_modules/@babel/runtime-corejs3')
}
}
};
但是，這不是一種干凈的方式。正確的方法是使用像 npm作業空間或類似的單存盤庫設定，并將您的node_modules檔案夾一直放在存盤庫的根目錄中。這樣，Webpack 從專案結構中的任何位置決議所需模塊都不會出現問題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/496209.html
標籤：javascript 节点.js 网页包 巴别塔