Babel 7.18不会迁移项目根目录之外的组件

我有一个组件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

重现该问题的演示项目位于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没有被transpared，仍然是ES6代码，这和我的预期相反，为什么node_modules/sharedlib目录是include d，但是里面的文件没有transpared？
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代码吗？谢谢帮助！

将@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文件就在那里。

不修改共享库

要在不修改sharedlibpackage.json文件的情况下使其工作，请使用resolve.alias使Webpack识别@babel/runtime-corejs3。修改以下内容并将其添加到webpack.config.js：

module.exports = {
    // Other Webpack configuration
    resolve: {
        alias: {
            '@babel/runtime-corejs3': path.resolve(__dirname, './node_modules/@babel/runtime-corejs3')
        }
    }
};

然而，这并不是一个干净的方法。正确的方法是使用一个单一的存储库设置，比如npmworkspaces或者类似的设置，并且将node_modules文件夹一直放在存储库的根目录中。这样，Webpack就不会在解析项目结构中任何地方的所需模块时出现问题。

Babel 7.18不会迁移项目根目录之外的组件

1条答案

不修改共享库

相关问题

热门标签

最新问答