在库名称中使用“@”将依赖项添加到外部

Question

I'm using ngx-build-plus to package my angular element with some webpack extra config. In my webpack extra config, I want to exclude a dependency whose name starts with the "@", like @angular/core. I know that @angular/core can be exclude by mapping it to ng.core, but for the library I'm trying to use I don't think I can link it using ng since its not an angular dependency. I get the error below.

const webpack = require('webpack');
module.exports = {
  externals: {
    '@somelib/core': '@somelib/core' // Does not work
  }
};

ERROR in main-es2015.js from Terser Unexpected character '@' [main-es2015.js:101,17]

Answer 1

I had the same problem when adding @blueprintjs/core as externals dependency. Looking at the file produced by webpack (using minimize: false in optimization options), the problem seems related to the export:

module.exports = @blueprintjs/core;

Adding the following to my webpack.config:

    output: {
    // https://github.com/webpack/webpack/issues/1114
    libraryTarget: 'commonjs2'
  },

allows to correctly configure the require produced by webpack:

module.exports = require("@blueprintjs/core");

Looking at the github issue did not give me more infos on the how/why but I hope it will help others