@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所有参数 |