Resolve Babel problem caused by NPM Link tripartite package

The background,

The author developed a three – party package – artboard library in the local, the library mainly to complete some graphics drawing function. After completion of development, artboard library local packaging no error. Then, I NPM link the package in the Web project and debug it. When building with the WebPack of the Web project, many core-JS errors were reported:

Module not found: Error: Can't resolve 'core-js/modules/web.dom.iterable'
...
Copy the code

@babel/preset-env + @babel/plugin-transform-runtime + @babel/ runtime-Corejs3 is used in the sketchpad library, the Babel configuration is as follows:

{
  "presets": ["@babel/preset-env"]."plugins": [["@babel/plugin-transform-runtime",
      {
        "corejs": 3}}]]Copy the code

The web project uses @babel/preset-env + Corejs3 scheme, the specific Babel configuration is as follows:

{
  "presets": [["@babel/preset-env",
      {
        "useBuiltIns": "usage"."corejs": 3}}]]Copy the code

Second, the reason why

When @babel/ Runtime-Corejs3 is used in artboard libraries, gasket modules are injected into the converted files, which are imported from @babel/ Runtime-Corejs3. If NPM links to a web project, the file will be excluded from the babel-loader file. If NPM links to a web project, the file will be excluded from the babel-loader file. If NPM links to a web project, the file will be excluded from the babel-loader file. The artboard library itself does not have a dependency on the package, resulting in an error.

Below, the author will combine several major problems to discuss the causes.

1. Whybabel-loaderWill the artboard library be recompiled?

First, modify the Babel-Loader for the Web project as follows:

{
  test: /\.(js|jsx|ts|tsx)$/,
  exclude: (path) = > {
    if (/draw[b|B]oard/.test(path)) {
      console.log(path, /node_modules/.test(path));
    }
    return /node_modules/.test(path);
  },
  use: ['babel-loader'],},Copy the code

First exclude the effect of final judgment or equivalent to exclude: / node_modules /, and then we pass/draw | b [b] oard /. The test (path) regular find palette library package, see his true path, and ultimately exclude the return value. The final results are as follows:

As you can see, path is the real path of the artboard library, excluding node_modules, and exclude does not exclude the artboard library files, so eventually the Babel-Loader of the Web project will still convert the artboard library.

Why are artboard library files available at compile timeimport corejsThe code?

First, let’s simplify the files in the artboard library to test the effect of calling Babel in a Web project.

The simplified code looks like this:

// Omit the logic and test the converted file
const Drawboard = {};

const a = [1.2.3].map((n) = > console.log);

export default Drawboard;
Copy the code

Then we manually execute the Babel code in the Web project and look at the converted file.

Execute command:

./node_modules/.bin/babel node_modules/@xxx/drawBoard/dist/index.js --out-dir dist
Copy the code

The result after conversion:

import 'core-js/modules/es.array.map.js';
var Drawboard = {};
var a = [1.2.3].map(function (n) {
  return console.log;
});
export default Drawboard;
Copy the code

As you can see, the web project Babel will pour the import in the wood-panelled library “core – js/modules/es. Array. The map. The js”; This is the source of the error. Show in the web project webpack, Babel – loader will perform the Babel configuration web project, and then to convert wood-panelled library files, will import “core – js/modules/es. Array. A map. The js”; Such code is injected into the artboard library file.

3. Whyimport core-jsComplains?

Because the Babel of the sketchpad library uses a preset env plus @babel/ runtime-Corejs3 schema, and @babel/ runtime-Corejs3 default depends on core-js-pure, So there is no core-JS package for the artboard library node_modules. Therefore, an error is reported when the code executes because the core-js package cannot be found.

Third, solve

In summary, we want to solve this problem by either babel-Loader compile again or artboard library without core-JS.

First, the problem of babel-Loader recompilation

1. Use webPack’s SymLinks property

Webpack has a special symLinks for this type of problem, which defaults to True and maps a resource to its real path. When changed to false, it will change to the link address.

When I open it in the Web project, the Babel-Loader for the Web project prints the following:

As you can see, the path is changed to [Web project]/node_modules/[artboard library], so that the babel-Loader exclude excludes the artboard library and will not be processed again.

Change the package.json main of the artboard library to point to the SRC file because the problem is caused by two Babel conversions, so you just need to change the main of the artboard library to point to the SRC file, and use the Babel conversion of the Web project for debugging. Of course, be careful to revert main to a file pointing to the dist directory when sending the artboard library package.

Two, not for the artboard librarycore-js

1. Modify the Babel configuration of the Web project

Change the Usage of the Web project Babel to Entry. This way Babel will only introduce all the spacers at the entrance and will not add core-JS dependencies separately to the artboard library code.

The compiled file:

var Drawboard = {};
var a = [1.2.3].map(function (n) {
  return console.log;
});
export default Drawboard;
Copy the code

Disadvantages: Changing the Babel configuration of the project to Entry will cause the project to have a very large number of spacers.

2. Modify the Babel configuration of artboard library

Change the Babel configuration of the artboard library to the preset-env + core-js scheme

{
  "presets": [["@babel/preset-env"./ / the default
      {
        "useBuiltIns": "usage"."corejs": 3 / / gasket}]],"plugins": ["@babel/plugin-transform-runtime"]}Copy the code

Thus, the artboard library node_modules will have the core-JS package

3. Install the core-JS package without changing the configuration

As the title shows, @babel/ Runtime-Corejs3 is still used, but a separate core-JS package is installed in the artboard library to solve compilation problems.

Four,

In summary, we have discussed the causes of the problem caused by NPM Link and summarized several solutions. In the process of solving the problem, the author also gained a deeper understanding of the connections between these Babel configurations. If you encounter similar problems in the future, refer to the above problem analysis process and solution.

The resources

Using @babel/runtime-corejs2 and @babel/runtime-corejs3 leads to larger bundle sizes