[译] 定制 create-react-app:如何制作自己的模版

简介: [译] 定制 create-react-app:如何制作自己的模版

原文:auth0.com/blog/how-to…

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 是能帮助你完成这种功能的一个机器人程序。


相关文章
|
6月前
|
存储 搜索推荐 安全
app注册协议通用模版
app注册协议通用模版
36 1
|
JSON 移动开发 前端开发
uni-app进阶之模版语法与数据绑定【day7】
uni-app进阶之模版语法与数据绑定【day7】
uni-app进阶之模版语法与数据绑定【day7】
|
JSON 移动开发 前端开发
uni-app进阶之模版语法与数据绑定【day7】
uni-app进阶之模版语法与数据绑定【day7】
|
28天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
424 7
|
28天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
484 1
|
14天前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
|
1月前
|
JavaScript 前端开发 小程序
uniapp一个人开发APP关键步骤和考虑因素
uniapp一个人开发APP关键步骤和考虑因素
117 1
uniapp一个人开发APP关键步骤和考虑因素
|
28天前
|
JavaScript 前端开发 UED
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
63 9
|
1月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
173 1
|
11天前
|
机器人
布谷直播App系统源码开发之后台管理功能详解
直播系统开发搭建管理后台功能详解!

热门文章

最新文章