builder v2

[nighca]

变更内容

1. 依赖升级

主要包括：

• webpack 4.x -> 5.x（以及相关的 webpack plugin & loader 等）
• 内置的 Typescript 3.4.x -> 4.1.x（注意这里指的不是 builder 编译自己使用的 Typescript，而是 builder 对 TS 项目进行构建使用的 Typescript）

2. transform 调整

• 移除对 transform stylus、svg-sprite、flow & vue 的支持
• 引入新的 transform svgr；关于 svgr，详见 https://react-svgr.com/

3. 配置行为调整

• 对于非 react 项目，js 文件中引入的 svg 资源默认通过 file 逻辑处理；对于 react 项目，js/jsx/ts/tsx 中引入的 svg 资源默认通过 svgr 处理
• 对 *.m.css & *.m.less 文件默认启用 CSS Modules
• 默认的目标浏览器从 last 2 versions 调整为 defaults，具体区别见 https://github.com/browserslist/browserslist
• 支持 npm package 作为 extends 目标，详见 build-config 支持 npm package 作为 extends 目标 #140
• 移除 preset config vue
• 移除 preset config qiniu/portal，可以使用 @qiniu/build-config/portal 代替
• optimization.extractVendor 不再支持指定 entry name，而是指定固定依赖的包名数组，例如 ["react", "react-dom"]，详情见 支持 extractCommon & extractVendor nighca/builder#2
• 新增配置项 optimization.highQualitySourceMap，可开启高质量 source map，以提供更好的开发调试体验，详见 source map 行为优化 #139

4. 其他

• 基于 Typescript 重写所有代码，预期有更好的稳定性 & 鲁棒性
• 新增 analyze 命令以分析 bundle 依赖，详见 新增 analyze 命令以分析 bundle 依赖 #132
• 优化了执行 upload 命令时的上传行为，详见 上传行为优化 #128
• 精简 Terminal 输出，详见 精简输出的 log  #138
• 执行 serve 命令时会监测配置文件变更并自动重启，详见 serve 时监测配置文件变更 #133
• 支持的 Node.js 版本从 Node.js 8/10/12 调整为 Node.js 12/14/16

升级文档

项目升级关注以下几个变更即可：

1. Typescript & Webpack 升级

对于 TS 项目，项目中依赖的 Typescript 版本也需要对应升级到 4.1.x，代码本身可能需要做对应调整

项目本身不需要引入 Webpack 作为依赖，不过需要注意，Webpack 5.x 不再默认将对 Node.js 运行环境的 polyfill 打包进 bundle（详见 https://webpack.js.org/blog/2020-10-10-webpack-5-release/#automatic-nodejs-polyfills-removed ）；如果项目代码依赖或间接依赖了 Node.js 环境才有的 module 或全局变量，可能会出现运行时错误。建议的处理方式是自己引入对应的 polyfill

一个例子是：若项目引入了 whatwg-url，后者依赖 node 环境才会提供的 Buffer，在新 builder 构建后会出错

2. React 升级

对于 React 项目，builder 使用 fast refresh 来优化组件的开发体验；fast refresh 依赖 React 17.x，因此这里需要将项目中的 react（及 react-dom 等相关依赖）的版本升级到 17.x

此外，原项目中的 react-hot-loader 依赖可以被干掉，代码中 react-hot-loader 相关代码也都可以移除

3. 对 svg 的引入

对于 react 项目，原本在 js/jsx/ts/tsx 文件中对 svg 文件进行引入会得到 svg-sprite 逻辑处理后的 id（一个字符串值），现在会得到一个 React component：

原先：

import icon from './icon.svg'

<SVGIcon src={icon} className={...} />

现在：

import Icon from './icon.svg'

<Icon className={...} />

4. build-config extends

如果原本 build-config.json 中 extends: "qiniu/portal"，需要调整为 extends: "@qiniu/build-config/portal"

5. optimization.extractVendor

如果项目配置了 optimization.extractVendor，需要调整使用姿势，详见 nighca#2

6. 对 css module 的引入

如果项目中开启了 CSS module，并通过

import * as style from 'foo.m.less'

在 JavaScript / Typescript 代码中引入，现在需要调整为

import style from 'foo.m.less'

升级参考

Fusion Portal 的 builder 升级 PR https://github.com/qbox/portal-fusion/pull/693