Babel 7.18 不會轉譯項目根目錄之外的組件

Question

我在project1的 babel 根目錄之外有一個組件sharedlib 。 以前用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目錄include d，但是里面的文件沒有被轉譯？

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代碼嗎？ 感謝幫助！

Answer 1

將@babel/runtime-corejs3添加到您的sharedlib package.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文件的情況下完成這項工作，請使用 resolve.alias 讓 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 從項目結構中的任何位置解析所需模塊都不會出現問題。