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

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

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

  1. const TerserPlugin = require('terser-webpack-plugin');
  2. module.exports = () => {
  3. return {
  4. mode: 'production',
  5. target: 'node',
  6. entry: './build.ts',
  7. output: {
  8. path: __dirname,
  9. filename: `build.js`
  10. },
  11. node: {
  12. __dirname: false,
  13. __filename: false,
  14. },
  15. resolve: {
  16. extensions: ['.ts', '.js'],
  17. mainFields: ['es2015', 'module', 'main', 'browser']
  18. },
  19. module: {
  20. rules: [
  21. {
  22. test: /\.ts$/i,
  23. loader: 'ts-loader',
  24. options: { configFile: 'tsconfig-build.json' },
  25. exclude: [/\/node_modules\//]
  26. }
  27. ]
  28. },
  29. externals: ['chalk', '@tubular/util'],
  30. optimization: {
  31. minimize: true,
  32. minimizer: [new TerserPlugin({
  33. terserOptions: {
  34. mangle: false,
  35. output: { max_line_len: 511 }
  36. }
  37. })],
  38. },
  39. };
  40. };

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

1hdlvixo

1hdlvixo1#

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

  1. externals:[
  2. {
  3. ["@company/library-name"]:{
  4. root: "@company/library-name"
  5. }
  6. }
  7. ]

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

c90pui9n

c90pui9n2#

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

  1. const nodeExternals = require('webpack-node-externals');
  2. // ...
  3. externalsPresets: { node: true },
  4. externals: [nodeExternals()],

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

ua4mk5z4

ua4mk5z43#

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

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

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

  1. externals: {
  2. jquery: 'jQuery'
  3. }

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

  1. externals: ['@tubular/util'],

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

  1. var t=@tubular/util;

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

  1. externals: {
  2. '@tubular/util': 'tbUtil'
  3. }

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

  1. {
  2. externals: ['@babel/core']
  3. }

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

  1. {
  2. externals: ['@babel/core'],
  3. externalsType: 'commonjs'
  4. }

然后,Webpack将取代

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

变成这样

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

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

展开查看全部

相关问题