earth-pc-scripts 脱胎于 earth-scripts，
旨在对PC项目优化react编译打包逻辑，提供更优性能和体验。
earth-pc-scripts的build时间对比earth-scripts减少35%以上，
对比react-scripts更是减少45%以上。
复杂项目的性能提高则更为明显。
使用说明
-
earth-pc-scripts是配合脚手架generator-earth所生成的pc项目一起使用。 -
earth-pc-scripts也可以单独使用，但需要遵守一定的代码格式要求。 -
推荐使用
generator-earth创建PC项目，并选择react-pc-typescript类型， 此时创建的项目会自动包含earth-pc-scripts。 -
earth-pc-scripts信奉约定优于配置编程思想和奥卡姆剃刀原则。 使用者唯一需要配置的只有production环境下的静态资源CDN地址。 新增页面也无需任何配置。
性能优化
-
截至2020-8-1，
earth-pc-scripts所依赖的所有类库都更新至最新版本。 -
earth-pc-scripts将依赖包从earth-scripts的67个大幅减少为30个。cnpm install安装时间减少60%以上。 -
earth-pc-scripts使用最新的babel-loader编译TypeScript， 弃用了ts-loader，编译速度提升一倍以上。 -
earth-pc-scripts弃用了IdModulePlugin， 转而使用webpack v4.3引入的contenthash替代。 -
earth-pc-scripts弃用了eslint，高贵的vscoder不需要eslint。 如果确实需要的话请在项目中自行引入。earth-pc-scripts作为编译框架应该更专注于性能和核心功能。 -
earth-pc-scripts弃用了jest和enzyme， 单元测试对PC端中后台项目意义不大。 -
earth-pc-scripts弃用了UglifyPlugin。 webpack的production模式已经默认启用UglifyPlugin，无需重复使用。 -
earth-pc-scripts弃用了babel-plugin-import。 我们的Antd是整体放置在CDN上，编译时的按需加载起不到任何意义。earth-pc-scripts每天的编译次数都在5位数以上， 因此， 在权衡webpack编译性能 vs PC浏览器端JS的加载和执行性能时， 前者胜出。 -
earth-pc-scripts的entry弃用了polyfill。 这些polyfill和Antd一样已经放置到CDN。无需再在编译时引入。 -
最后也是最重要的一条，
earth-pc-scripts弃用了create-react-app里80%以上的默认Plugin及Preset。 弃用这些额外的功能使得webpackdevsrv启动速度提高15%以上。 react-pc项目babelrc零配置即可使用。
使用.env
项目根目录下添加.env.development或.env.production文件。 这些文件里定义的变量是用来替换react代码中及html模板中的同名变量。
在.env.development文件里定义
REACT_VAR_PUBLIC_URL=finance.57.com
其中以REACT_VAR_开头的变量，会被替换进js和html里
具体规则为
- 在html里的代码，使用
%REACT_VAR_PUBLIC_URL%替换 - 在js里的代码，使用
process.env.REACT_VAR_PUBLIC_URL替换
注
NODE_ENV 变量不需要定义在上述.env文件中，js和html代码始终都可以获取
在html文件中获取
<p>this variable is read from .env file: %REACT_VAR_PUBLIC_URL%</p>
<p>this variable is read from .env file: %NODE_ENV%</p>
在js文件中获取
alert(process.env.REACT_VAR_PUBLIC_URL);
if (process.env.NODE_ENV === 'production') {
alert('production');
}