@linteng/esbuild-loader

基于gogocode与esbuild做的tsx/jsx预处理器, 可替换babel-loader以加速构建。

开始

首先安装 @linteng/esbuild-loader:

npm install @linteng/esbuild-loader --save-dev

or

yarn add -D @linteng/esbuild-loader

or

pnpm add -D @linteng/esbuild-loader

然后在 webpack 配置中增加loader

webpack.config.js

 module.exports = {
   module: {
    rules: [
       {
         test: /\.[jt]sx?$/,
         exclude: /node_modules/,
         loader: '@linteng/esbuild-loader',
          // 默认值
         options: {
            // target: 'es2015', // default, or 'es20XX', 'esnext'
            // jsxFactory: 'React.createElement',
            // jsxFragment: 'React.Fragment',
            // loader: 'tsx',
            // importOptions: {
            //   libraryName: 'antd',
            //   libraryDirectory: 'es',
            //   style: 'less',
            // }
         }
       },
     ],
   },
 };

options.key	options.value	默认值
target	此配置项设置生成 JavaScript 代码的目标环境，同esbuild Transform API的target	es2015
jsxFactory	编译为模板创建函数，同esbuild Transform API的jsxFactory	React.createElement
jsxFragment	编译为JSX片段模板创建函数，同esbuild Transform API的jsxFragment	React.Fragment
loader	该配置项改变了输入文件解析的方式。例如， js loader 将文件解析为 JavaScript， css loader 将文件解析为 CSS。同esbuild Transform loader	tsx
importOptions	{libraryName: string, libraryDirectory: string, style: string}, 同babel-plugin-import	{libraryName: 'antd', libraryDirectory: 'es', style: 'less'}
其他	接收[esbuild Transform API](https://esbuild.github.io/api/#transform-api所有参数