sucrase.js 在项目中的使用

背景
在开发时，项目启动编译时间过长，平均在120s~140s，观察到最高编译时间190s+;

严重影响开发效率，在多需求切换分支时尤为明显。

介绍
sucrase 是一款 JavaScript/TypeScript 编译器，目标是提供比标准Babel编译器更快的构建速度，在npm 的 sucrase的介绍中，被称之为babel的替代品，号称比babel 快20倍

sucrase 允许超快速开发，但它只能在最新node 6 以上及非ie浏览器中使用。

sucrase 是从babel派生而来，算是babel的子集

改造
安装 sucrase
npm install sucrase

安装 sucrase 的加载器
npm install @sucrase/webpack-loader

安装 针对sucrase 的webpack 对象结构语法的解析插件
npm install @sucrase/webpack-object-rest-spread-plugin

修改webpack.dev.js
1 添加sucrase 的加载器

2 注释babel的加载器 (webpack.config.base.js 中有也需要移出)

（注意：以上改造就是为了在开发环境运行时，不执行babel的编译，在打包时，需要babel执行编译，就要在生产环境编译的js中加入babel的加载器）

注意事项：
1 不支持解构语法 （安装上面说到的插件可解决）

2 不能使用装饰器，需要改造成函数使用

3 发现react-moment 也不能用 ，猜测可能是组件内语法问题

解决办法：把react-moment 组件替换为moment.js 使用

sucrase 的主要配置：

jsx：将JSX语法转换为React.createElement

typescript：将TypeScript代码编译为JavaScript，删除类型注释并处理诸如枚举之类的功能。

flow：删除流类型注释。

import：使用与Babel和TypeScript相同的方法将ES模块（import/ export）转换为CommonJS（require/ module.exports）–esModuleInterop

react-hot-loader：在react-hot-loader 项目中执行等效的转换

总结
1 sucrase 不检查代码是否错误

 2 sucrase 主要特性是编译js 运行时永远不会支持的语言扩展（如：JSX、TypeScript、Flow） 

 3 sucrase  由于自身定位，不会生成es5的代码，所以不适合需要兼容老版本浏览器的项目，建议生产环境还是使用babel来构建编译

sucrase.js 的github地址：https://github.com/alangpierce/sucrase/tree/9a33fc30ece8c36f82af8662147c36dc28b2e016

其它编译优化方案分享

BABEL 设置最新浏览器配置 不编译es5api

公用插件 使用cdn

文件hash名未修改不编译

vite

rome

webpack5