Skip to main content
Version: 3.0

Config

对于esboot中能使用的自定义配置，你可以使用项目根目录的.esbootrc.ts。

esboot的配置文件是一个正常的 node 模块，它在执行esboot命令行的时候使用，并且不包含在浏览器端构建中。

这里有一个最简单的esboot配置文件的范例：

import { defineConfig } from 'esboot';
 
export default defineConfig({
  outputPath: 'dist',
});

使用 defineConfig 包裹配置是为了在书写配置文件的时候，能得到更好的拼写联想支持。如果你不需要，直接 export default {} 也可以。

bundler​

  • 类型：Bundler

当前使用的 bundler，可选值为

bundlerOptions​

  • 类型：BundlerOptions 基于你选择的 bundler 的配置项，具体参考各个 bundler 的文档。

isSP​

  • 类型：boolean
  • 默认值：false

是否是单平台模式。

plugins​

since v2.8.0

使用插件添加额外功能，接收一个plugin。

server​

proxy​

  • 类型：object
  • 默认值：{}

配置代理功能，参考devServer.proxy。

比如，

proxy: {
  '/api': {
    'target': 'http://jsonplaceholder.typicode.com/',
    'changeOrigin': true,
    'pathRewrite': { '^/api' : '' },
  }
}

注意：proxy 功能仅在 dev 时有效。

https​

  • 默认值：false

与devServer.https一致。

http2​

  • 默认值：false

与devServer.http2一致。

open​

  • 默认值：false

与devServer.open一致。

port​

  • 默认值：8900

与devServer.port一致。

outputPath​

  • 默认值：dist

与output.path一致。

注意：执行esboot preview的时候也会默认用这个路径。

useLangJsonPicker​

warning

因为useLangJsonPicker实现方式的特殊性，mfsu的实现不支持entry是一个对象，导致和mfsu的entry冲突了，dev模式下会失效，但是不影响prod模式。

  • 类型： boolean
  • 默认值：true

是否开启pick语言json文件字段。

如果开启，配合langJsonPicker字段使用，减少多语言文件体积。

参考下面示例：

en-US.json

{
  "global": {
    "project": "test project"
  },
  "test1": {
    "nest1": {
      "key1": "zh-cn-key1"
    },
    "nest2": {
      "key2": "zh-cn-key2"
    }
  }
}

index.entry.tsx

import enUS from '@/lang/en-US.json';

// 此时enUS的内容就会去掉`test1.nest1`的内容。
export default {
  langJsonPicker: ['global', 'test1.nest2'],
  title: 'index',
};
warning

为了统一多语言文件，只会对src/lang/*.json文件生效。

minimize​

  • 类型: boolean

一键关闭js和css的压缩功能。

jsMinifier​

  • 类型：JsMinifier。
enum JsMinifier {
  terser = 'terser',
  // esbuild = 'esbuild',
  swc = 'swc',
  none = 'none', // 不压缩
}
  • 默认值：JsMinifier.terser

jsMinifierOptions​

  • 类型：object
  • 默认值：{}

jsMinifier 的配置项；默认情况下压缩代码会移除代码中的注释，可以通过对应的 jsMinifier 选项来保留注释。

示例:

{
  jsMinifier: 'terser',
  jsMinifierOptions: {
    format: {
      comments: false,
    },
  }
}

配置项需要和所使用的工具对应，具体参考对应文档：

cssMinifier​

  • 类型：CSSMinifier
export enum CSSMinifier {
  cssnano = 'cssnano',
  lightningcss = 'lightningcss',
  none = 'none', // 不压缩
}
  • 默认值：CSSMinifier.cssnano

cssMinifierOptions​

  • 类型： Object
  • 默认值：{}

cssMinifier CSS 压缩工具配置选项。

示例：

{
  cssMinifier: 'lightningcss',
  cssMinifierOptions: {},
}

对应 CSS 压缩的配置请查看对应的文档。

analyze​

  • 类型：boolean
  • 默认值：false

产物size分析，基于webpack-bundle-analyzer。

默认开启8101端口，可以使用process.env.ANALYZE_PORT来修改端口。

alias​

  • 类型：Record<string, string>
  • 默认值：
{
  '@': 'src',
  '@mobile': 'src/platforms/mobile',
  '@mobile-native': 'src/platforms/mobile/_native',
  '@mobile-browser': 'src/platforms/mobile/_browser',
  '@pc': 'src/platforms/pc',
  '@pc-native': 'src/platforms/pc/_native',
  '@pc-browser': 'src/platforms/pc/_browser',
}

路径别名配置，使用方法如：

import { FONT_SIZE } from '@/constants/config';
tip

配置的key，如@，不要写成@/，value如src，不要写成src/，因为解析的时候会自动加上。

因为alias在项目中其实需要配置4个地方(eslint/typescript/webpack/babel)，4个地方的写法都有些不同，所以esboot内部会去兼容格式问题。

其中webpack和babel的改了alias会立即生效。

typescript的会在执行esboot g-alias后生效。

但是eslint只会在开项目的时候读一次配置，所以需要手动执行一次ESLint: Restart ESLint Server这个命令，推荐绑定这个操作为一个快捷键，这样可以快捷重启。

也可以直接reload window(vscode中触发快捷键ctrl + shift + p，然后输入reload window)一下。这样alias也会完全生效。

define​

  • 类型：Record<string, string>
  • 默认值： 如下
{
  'process.env.VERSION': JSON.stringify(version),
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
}

基于define-plugin 插件设置代码中的可用变量。

caution
  • 属性值会经过一次 JSON.stringify 转换。
  • key 值的替换是通过语法形式来匹配的，比如配置了 {'a.b.c': 'abcValue'} 是无法替换代码中的 a.b?.c 的

当你在 ts 的项目中使用这些变量时，你需要在 globals.d.ts 文件中声明变量类型，以支持 ts 类型提示，比如：

// define
declare const define: string;

sourceMap​

since 2.10.0

  • 类型：boolean
  • 默认值：dev模式下为true，prod模式下false。

是否开启sourceMap。

externals​

参考webpack.externals

copy​

大部分情况可以不用，参考static

  • 类型：Array<string | { from: string; to: string; }>
  • 默认值：[]

配置要复制到输出目录的文件或文件夹。

当配置字符串时，默认拷贝到产物目录，如：

copy: ['foo.json', 'src/bar.json']

会产生如下产物的结构：

+ dist
  - bar.json
  - foo.json
+ src
  - bar.json
- foo.json

你也可以通过对象配置具体的拷贝位置，其中相对路径的起点为项目根目录：

copy: [
  { from: 'from', to: 'dist/output' },
  { from: 'file.json', to: 'dist' }
]

此时将产生如下产物结构：

+ dist
  + output
    - foo.json
  - file.json
+ from
  - foo.json
- file.json

svgr​

  • 类型：boolean
  • 默认值：true

开启svgr之后可以写成

import svg from './assets/file.svg?url'
import Svg from './assets/file.svg'

const App = () => {
  return (
    <div>
      <img src={svg} width="200" height="200" />
      <Svg width="200" height="200" viewBox="0 0 3500 3500" />
    </div>
  )
}

svgrOptions​

  • 默认值:
{
  icon: true,
  typescript: true,
  ext: 'tsx',
}

参考svgrOptions

pxtorem​

  • 默认值：
{
  // 如果是mobile 默认为true
  enable: false,
  rootValue: 100,
  unitPrecision: 5,
  propWhiteList: [],
  propBlackList: [],
  exclude: false,
  selectorBlackList: [],
  ignoreIdentifier: false,
  replace: true,
  mediaQuery: false,
  minPixelValue: 0,
}

参考postcss-plugin-px2rem。只不过内置的是基于postcss的插件。

useTailwindcss​

  • 类型：boolean
  • 默认值：true

是否使用tailwindcss。

tailwindcssOptions​

  • 类型：(config: TailwindConfig) => TailwindConfig | TailwindConfig
  • 默认：
const defaultTailwindCSSOpts: Config = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

参考tailwindcss。