时间： 分类：   字数： 887 字 阅读： 2分钟 阅读次数：

优化打包

这次将webpack替换成了esbuild，没有选择swc的原因是，swc官方有一个替换webpack的方案，但是还在开发中。vue的打包工具vite采用了esbuild，已经广受好评。

遇到的问题

error: Unexpected “@” 修饰符错误
Unexpected "@"
12 |  
   |   ^
13 |  @connect(({ aaa, bbb }) => ({
   |  ^
14 |    aaa,

加入配置

loader: {
      '.js': 'tsx',
}

Feature request: Decorators support

Uncaught ReferenceError: global is not defined

global是node的全局变量，browser并不支持。可以配置define，对其进行调整。

define: {
  global: 'window',
};
图片及字体的加载问题
✘ [ERROR] No loader is configured for ".png" files: src/local-us-antd-ui/Header/logo-c.png

在loader里边加入{“.png”: “dataurl”}可以解决，其它类型的报错可以类推。

～符号(tilde)被弃用导致的less文件找不到
[ERROR] [plugin less-loader] '~antd/lib/style/themes/default.less' wasn't found.

~是webpack的less-loader包解决@import路径问题引入的，如今已不再鼓励使用。

官方是这么说的： > Using ~ is deprecated and can be removed from your code (we recommend it), but we still support it for historical reasons. Why you can removed it? The loader will first try to resolve @import as relative, if it cannot be resolved, the loader will try to resolve @import inside node_modules.

所以esbuild的less-loader是不支持～的。不止改造中的项目里有～，antd包里也有大量的～，手动替换不现实。

【失败尝试】尝试了less-loader的源码，建一个私有包，将node_modules/esbuild-plugin-less/build/cjs.js中的 /@import.*?["']([^"']+)["'].*?/;改成 /@import.*?["']~([^"']+)["'].*?/;奈何没有生效，百思不得其解。

最后靠一个包 less-plugin-npm-import 解决的。

参考文章： Can’t resolve less file load with Ant design less files webpack-contrib/less-loader esbuild Less 找不到 ~x.less 的问题

贴配置

const esbuild = require('esbuild')
const LessNpmImport = require('less-plugin-npm-import')
const { lessLoader } = require('esbuild-plugin-less')
const theme = require('./theme.js')

esbuild
  .build({
    entryPoints: ['./src/index.js'],
    splitting: true,
    outdir: './build/assets',
    format: 'esm',
    minify: true,
    bundle: true,
    define: {
      global: 'window',
    },
    loader: {
      '.js': 'tsx',
      '.png': 'dataurl',
      '.jpg': 'dataurl',
      '.svg': 'dataurl',
      '.ttf': 'dataurl',
      '.woff': 'dataurl',
      '.eot': 'dataurl',
    },
    plugins: [
      lessLoader({
        plugins: [new LessNpmImport({ prefix: '~' })],
        modifyVars: theme,
        javascriptEnabled: true,
      }),
    ],
  })
  .catch(() => process.exit(1))

暂时没解决问题

  • 没有对应的index.html生成插件。如果模版过多，需要自己写脚本。
  • less文件的作用域出错（可能是代码有问题）
  • favicon图标加载不出来

其他引用

How to Replace Webpack in Create React App With esbuild Less options

0%