TL;DR: 有多种可用的工具能帮助开发者构建不同种类的网站和应用。其中之一就是 Create React App(CRA),该 CLI 工具帮助 JavaScript 开发者不用配置就能创建 React 应用。可即便是应用了 CRA 这么棒的工具,开发者仍需要稍作调整,增加 CRA 中不含的特别的脚本和模块等。今天,我将教你如何为自己的团队创建自定义的 create-react-app
脚本。
许多开发者已经使用了 create-react-app 来构建他们的 React 应用,但像我之前提到的,开发者仍呼吁更多的配置选项。其中一些希望获得的支持是:
- PostCSS
- CSS Modules
- LESS
- SASS
- ES7
- MobX
- 服务器渲染
...以及更多开箱可用的功能。
有很多包括 JavaScript 新人在内的开发者,一天天的简直是胡乱地创建 React 应用,所以 Facebook 的 CRA 团队才构建了 create-react-app 工具以使创建此类应用的过程更快更安全。
作为一个需要支持以上我高亮过的功能的开发者,一个办法就是运行 npm run eject
。这条命令拷贝所有配置文件和依赖到你的项目中,然后你可以通过所有这些工具手动配置你的应用以达到满意。
开发者面对 eject 时的主要挑战一是无法再享受 CRA 之后的新特性了,二是在团队内同步设置会非常低效。解决的一个好办法是为你的团队发布一个 react-scripts
的 fork 库,然后所有团队中的开发者只需要运行 create-react-app my-app --scripts-version mycompany-react-scripts
就能拥有完全相同的设置了!
创建一个 fork
打开 GitHub 仓库并 fork create-react-app 库。
fork 一个 create-react-app
注意: 推荐 fork 最新的 stable 分支。Master 是不稳定的。
在 packages
目录内,有一个叫做 react-scripts
的文件夹。该文件夹包含了用于构建、测试和启动你的应用的脚本。事实上,这就是我们能作出改进的地方,可以配置并增加新的脚本和模版。
改进配置
clone 目录后在代码编辑器中打开 react-scripts/scripts/init.js
文件。让我们增加一些 console 信息:
console.log(chalk.red('VERY IMPORTANT:')); console.log('Create a .env file at the root of your project with REACT_APP_EMPLOYEE_ID and REACT_APP_POSITION_ID'); console.log(' You can find these values in the company dashboard under application settings.'); console.log(' https://company.bamboohr.com/settings'); console.log(); .
将在这块区域增加提示信息 安装过程中将提示这些新增的重要信息
现在,来更改模版。
打开 react-scripts/template/src/App.js
并将其内容替换为:
import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { getEnvValues() { if (!process.env.REACT_APP_EMPLOYEE_ID || !process.env.REACT_APP_POSITION_ID) { throw new Error('Please define `REACT_APP_EMPLOYEE_ID` and `REACT_APP_POSITION_ID` in your .env file'); } const employeeID = process.env.REACT_APP_EMPLOYEE_ID const position = process.env.REACT_APP_POSITION_ID; return { employeeID, position }; } render() { const { employeeID, position } = this.getEnvValues(); return ( <div className="App"> <div className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h2>Welcome to Unicode Labs</h2> </div> <p className="App-intro"> <b> Employee ID: { employeeID } </b><br/><br/> <b> Position: { position } </b> </p> </div> ); } } export default App;
然后,到 react-scripts/template/public
目录中,打开 index.html
文件并将 <title>
标签的内容改为 Unicode Labs
。
也可以将 favicon 改为你们公司的 -- 你能随意修改或增加若干团队常用的模版。
在 react-scripts/template
目录中创建一个内容如下的 .env.example
文件:
REACT_APP_EMPLOYEE_ID='44566' REACT_APP_POSITION_ID='ENGR'
一旦用这个版本的 create-react-app
工具安装完了 react-scripts
,用户就必须将 .env.example
文件重命名为 .env
。你应当将此说明写入 README
文件。
注意: CRA 已经支持了自定义的 env 变量,只要你愿意将 REACT_APP 作为变量前缀的话。
这就是所有我们需要的!
发布 react-scripts 到 NPM
在发布到 npm 之前,我们需要将 react-scripts/package.json
文件中 name
属性的值改为 unicodelabs-react-scripts
。
同时将 description
的值改为 Unicodelabs Configuration and scripts for Create React App.
、将 repository
的值指向正确的地址(本例中为 unicodelabs/create-react-app
)。
现在,从终端中进入 react-scripts
目录:
react-scripts 目录
登录到 npm:
登录 npm
按提示进行,并发布。
发布到 npm
测试自定义脚本
在终端中运行:
create-react-app test-app --scripts-version unicodelabs-react-scripts
在你自己的案例中可能会是 yourname-react-scripts
,其中 yourname
是你自己的公司名或者别的什么自定义的命名。
CRA 会执行安装,然后你将看到:
重要提示
记得吗?我们早先把这些信息放在了代码里。太棒了!
现在,在终端中进入 test-app
目录,重命名 .env.example
为 .env
并运行 npm start
命令。
你的应用会以新模版启动:
展现了新模版
总结
好的程序员会日常不断地打磨他们的工具以提高生产力。CRA 是一个快速创建 React 应用的利器。此外,fork 并定制化自己的 react-scripts
能帮助你和团队容易地增加所有需要的配置。你需要维护你的 fork,并 保持其和上游的同步 (help.github.com/articles/fo…) 以获得所有更新。Backstroke 是能帮助你完成这种功能的一个机器人程序。