Babel 7.18 不会转译项目根目录之外的组件

Question

I have a component sharedlib outside the babel root directory of project1 . I used to use webpack to package this project without problems, but when I configured babel, I got the following error：

          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

The demo project to reproduce the problem is on github https://github.com/xybei/test_babel

My project directory is like this:

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    

Here's the project1/package.json , I have configured sharedlib as a local module "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"
                }
            }
        ]
    }
};

If I comment out exclude and let go of include , the compilation will no longer report an error, but the util.js in packaged file has not been transpiled, and it is still ES6 code. This is contrary to my expectation. Why is the node_modules/sharedlib directory include d, but the files in it are not transpiled?

babel.config.js

module.exports = {
    presets: [
        ["@babel/preset-env",
            {
                targets: {
                    ie: 10
                },
                debug: true
            }]
    ],
    plugins: [
        [
            "@babel/plugin-transform-runtime", {
                corejs: 3
            }
        ]
    ]
};

sharedlib comes from a third party, I don't want to modify and install @babel/runtime-corejs3 under its directory, can I modify the configuration of my project1 to transpile the sharedlib code? thanks for help!

Answer 1

Add @babel/runtime-corejs3 to your sharedlib package.json dependency.

{
  "name": "sharedlib",
  "version": "1.0.0",
  "description": "test sharedlib",
  "main": "index.js",
  "module": "index.js",
  "dependencies": {
    "@babel/runtime-corejs3": "^7.18.3"
  }
}

When you use Babel's @babel/plugin-transform-runtime , you need to add appropriate runtime dependency to the project. For corejs: 3 option, you would need @babel/runtime-corejs3 . Look at the required dependencies you need to additionally install in order for this to run.

Further, you should use package import instead of relative import:

// Instead of this:
import { Util } from '../../sharedlib';

// Use this:
import { Util } from 'sharedlib';

Also, you would need to install this inside sharedlib folder's node_modules since that's where the util.js file is present.

Without modifying sharedlib

To make this work without modifying sharedlib package.json file, make Webpack aware of @babel/runtime-corejs3 using resolve.alias . Modify and add following to webpack.config.js :

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

However, this is not a clean way of doing it. The right approach would be to use a mono-repo setup like npm workspaces or similar and have your node_modules folders all the way up in the ROOT of the repository. That way, Webpack will not have problem resolving required modules from anywhere in the project structure.