Webpack“externals”选项的意外字符“@”

tyu7yeag  于 2023-10-19  发布在  Webpack
关注(0)|答案(3)|浏览(143)

我发现了很多关于webpack中发生的“意外字符”@“的东西,但没有一个是专门与externals webpack选项的错误相关的,也没有一个是有用的。我以前用过这个,带和不带@-符号,没有任何麻烦,所以我不知道为什么webpack现在变得暴躁。

const TerserPlugin = require('terser-webpack-plugin');

module.exports = () => {
  return {
    mode: 'production',
    target: 'node',
    entry: './build.ts',
    output: {
      path: __dirname,
      filename: `build.js`
    },
    node: {
      __dirname: false,
      __filename: false,
    },
    resolve: {
      extensions: ['.ts', '.js'],
      mainFields: ['es2015', 'module', 'main', 'browser']
    },
    module: {
      rules: [
        {
          test: /\.ts$/i,
          loader: 'ts-loader',
          options: { configFile: 'tsconfig-build.json' },
          exclude: [/\/node_modules\//]
        }
      ]
    },
    externals: ['chalk', '@tubular/util'],
    optimization: {
      minimize: true,
      minimizer: [new TerserPlugin({
        terserOptions: {
          mangle: false,
          output: { max_line_len: 511 }
        }
      })],
    },
  };
};

@是我想要排除的包名的必要部分,我以前排除过这样的包,所以这既神秘又烦人。
有谁知道这是怎么回事吗?

1hdlvixo

1hdlvixo1#

我找到了一个解决方案,我也面临着同样的问题与Vue.js项目--mode production。所有其他模式都工作正常。

externals:[
      {
        ["@company/library-name"]:{
          root: "@company/library-name"
        }
      }
    ]

这基本上是使用官方文档中的对象语法。

c90pui9n

c90pui9n2#

我找到了一个答案,但肯定不是我想要的答案。
如果我使用webpack-node-externals包,我可以像这样外部化所有node_modules

const nodeExternals = require('webpack-node-externals');

 // ...

    externalsPresets: { node: true },
    externals: [nodeExternals()],

在这种特殊情况下,排除所有节点外部元素正好可以,所以webpack-node-externals解决了我眼前的问题。但是如果我想更有选择性,并且想排除名称中带有@的软件包,我手上仍然有一个谜。

ua4mk5z4

ua4mk5z43#

Webpackexternals选项依赖于externalsType 1。默认情况下,externalsTypevar,这意味着您希望此变量存在于全局范围内。
例如,如果我们通过脚本链接在浏览器中导入jQuery

<script src="https://code.jquery.com/jquery-3.7.0.slim.min.js" ...></script>

window对象中将有一个名为jQuery的全局变量,因此Webpack配置如下:

externals: {
  jquery: 'jQuery'
}

声明:
当你发现一个来自jquery的导入时,把它从bundle中删除,并在它的位置使用jQuery全局变量。
如果你把这个配置没有externals

externals: ['@tubular/util'],

Webpack会尝试用一个名为@tubular/util的全局变量来替换这些requires或import:

var t=@tubular/util;

这肯定会抛出一个错误。
在您的特定情况下,通过脚本标记导入的@tubular/util创建了一个tbUtil全局变量,因此您的配置应该是:

externals: {
    '@tubular/util': 'tbUtil'  
}

如果有人试图编译Node包,并且他们想从包中排除一些已经安装的包,也可能出现此错误。例如,如果您使用此externals配置而没有指定正确的externalsType,则会得到类似的错误。

{
    externals: ['@babel/core']
}

在这些情况下,您应该根据需要指定适当的externalsType(这些是所有选项):

{
    externals: ['@babel/core'],
    externalsType: 'commonjs'
}

然后,Webpack将取代

import { transform } from '@babel/core';

变成这样

var b=require("@babel/core");
var t=b.transform;

而且它不会在捆绑包中附带@babel/core

相关问题