Create React App 使用

2019-02-13 admin

作为大前端时代的页面仔, 工作至今, 在项目中一直使用的是 Vue, 很遗憾对 React 的了解仅限于几个版本之前官方文档与网上的教程。新春伊始,有幸在下一个项目中用到 React, 既是从零开始, 不妨写一点东西以记录学习的过程,这也是用了一上午搭建这个博客的初衷。首当其冲的是项目的搭建, 相信没有人会喜欢 webpack 繁琐的配置,因此这里学一下 Create React App(CRA) 的用法。

快速开始

根据官网上的介绍,只需下面两个命令,就能实现项目的基本搭建:

$ yarn global add create-react-app

$ create-react-app react-demo

生成的项目目录结构如下图所示 👇:

图片描述

和 Vue Cli 相比还是比较简陋的, Vue Cli 通过命令行选择是否使用 vuex 或 vue-router,CRA 貌似需要手动添加路由库与状态管理库,这也是可以理解的,毕竟 React 生态圈中类似路由与状态管理的库不止一家。

看了下 package.json 中的 scripts 命令,如下:

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

执行 start 命令会启动 webpack-dev-server 方便本地开发调试,build 命令对应打出生产环境的包。eject 命令作用是将 webpack 配置暴露出来, 默认利用 CRA 生成项目的一些 webpack 配置是不可覆盖的, 比如内置的环境变量 Process.env.NODE_ENV。 通过 eject 得到具体的 webpack 配置之后可以进行修改, 这里没有演示, 就是不想看到一堆 webpack 配置, 要的就是主流前端开发工具的开箱即用,而且 eject 执行之后是不可恢复的。

到这里就会有一个问题, 在使用 Vue Cli 时, build 命令提供了 mode 选项设置 process.evn.NODE_ENV 的值为 development 还是 production。遗憾的是, CRA 没有相似的选项。但是在实际开发中, 可能测试环境上上部署的代码需要开发环境下打包的代码以方便调试, 比如在测试环境上可以有 VConsole 和 SourceMap,但是在生产环境下就需要去掉。

那如何才能有开发环境的打包呢 👀?

build 区分 development 和 production 模式

查阅文档发现, 为了达到区分生产环境构建和开发环境构建的目的, 可以通过自定义环境变量来实现, 参考 How can I create build for my dev server, 在项目文件夹下创建 .env.production 和 .env.development 文件。 分别设置 REACT_APP_ENV 为 production 和 development。 在package.json 中创建新的命令如下:

// yarn add dotenv-cli -D
"dev-build": "dotenv -e .env.development react-scripts build"

当使用 yarn start 和 yarn dev-build 命令时会加载 .env.development 文件。 当使用 yarn build 命令时,对应加载 .env.production 文件。因此可以在业务代码中可以通过使用 process.env.REACT_APP_ENV 来区分不同构建环境(实际 dev-build 打包还是生产环境的,仅用于业务代码区分 )。

Sass/Less 处理

文档中有提到如何添加 Sass, 并没有提到如何添加 Less,真是是逼死强迫症 😖。各种查找,发现了一个工具 react-app-rewired 可以很方便的覆盖 CRA 的 webpack 配置而不用执行 eject 命令。于是乎, 安装 react-app-rewired, 并将 package.json 中的命令修改如下:

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "dev-build": "dotenv -e .env.development react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

同时, 有 react-app-rewire-less 工具用来提供 Less 支持,瞬间人生充满希望,仿佛胜利近在咫尺。 撸起袖子,对照文档, 在项目根目录下添加 config-overrides.js 文件,内容如下:

  /* config-overrides.js */
  const rewireLess = require('react-app-rewire-less');

  module.exports = function override(config, env) {
    config = rewireLess(config, env);
    return config;
  };

执行 yarn start 查看效果:

图片描述

很遗憾报错了, 根据提示 getBbabelLoader 工具方法在 2.0 版本废弃, 可以使用 customize-cra 进行替代,于是安装 customize-cra。

修改 config-overrides.js 如下:

const { override, addLessLoader } = require('customize-cra');

module.exports = override(
    addLessLoader()
);

重新执行 yarn start,demo 能够正常运行了, 试了一下, 貌似还支持 css modules。 虽然有点曲折,终归是车到山前必有路。(其实心里已经喊了好多次mmp了, 整个 Less 还这么麻烦~ 😣)

支持 Less 之后, 在项目中必不可少的就是 PostCSS了,还好这块文档中有提到。

PostCSS

CRA 内部已经使用了 Autoprefixer 添加浏览器前缀, 只需要在 package.json 中添加 browserslist 属行来定义支持的浏览器。

在开发 H5 app 的时候, 为了适配通常采用 rem 布局, 方便起见, 通常会用到 postcss-px2rem 这个工具, 如何在 CRA 中配置 px2rem 呢?

在上面折腾 customize-cra 的基础上,发现这个库中提供了 addPostcssPlugins 函数。

const {
  override,
  addPostcssPlugins
} = require("customize-cra");

module.exports = override(
  addPostcssPlugins([
    require('postcss-px2rem')({ remUnit: 37.5 })
  ]),
);

代码如上, 就可以开心的使用 px2rem 了。

路由解决方案 react-router

CRA 的文档中提到最受欢迎的路由解决方案是 react-router。 命令如下

$ yarn add react-router-dom

所以 react-router-dom 是什么鬼? 参见react-router和react-router-dom的区别

react-router 实现了路由的核心功能, react-router-dom 基于 react-router, 加入了在浏览器环境下的一些功能。

react-router 4.x 相较于之前的版本有着较大的变化,不过还好,对于我这种初学者来说都一样。

状态管理方案 redux or mobx

提到 React 的状态管理, 像我这样的小白, 瞬间想到的就是 Redux,但是作为初学者在没有仔细看 redux 教程时, 对一些术语, 比如 actions、reducers、middleware等感到头疼。 搜了一下社区其他的状态管理方案,看到 mobx这个库,打算对比一下学习, 挑一个用在项目中踩坑。

代码拆分(路由懒加载)

参考 React.lazy 以及 React.Suspense

写在最后

折腾一番,到这里项目结构基本上已经搭建了, 后续关于 CRA 的问题,遇到之后,再进行补充 😋。

原文链接:https://segmentfault.com/a/1190000018130766

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-53658.html

文章标题:Create React App 使用

相关文章
jQuery中DOM树操作之使用反向插入方法实例分析
本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下: 使用反向插入方法 这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用...
2015-11-13
React Native 用JavaScript编写原生ios应用
ReactNative 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。 Re...
2015-11-12
Bootstrap BootstrapDialog使用详解
这里有两种展现方式 写在前面:首先你要引入的库有 css : bootstrap.min.css bootstrap-dialog.css js : jquery-1.11.1.min.js bootstrap.min.js bootstr...
2017-03-16
在 Microsoft Azure 中使用 MEAN 堆栈基于开放数据协议
网络开发人员通常构建伟大的应用程序在客户端使用JavaScript和ASP(c#或Visual Basic . NET)在服务器端。 但是如果你能使用一个共同的语言来构建应用程序的所有层堆栈,从浏览器和服务器端业务处理服务层,甚至在数据库查...
2015-11-12
梳理前端开发使用eslint-prettier检查和格式化代码
问题痛点 在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发。因此编写符合团队编码规范的代码是至关重要的,这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。 对于代码版本管理系统(svn 和 git或者其他)...
2018-05-07
HTML5渐行渐近 APP还能走多远
鎽樿�侊細浠讳綍浜嬬墿閮界洓鏋佽€岃“锛孉PP涔熶笉渚嬪�栥€傚湪鍙栧緱杈夌厡鎴愮哗鐨勫悓鏃讹紝APP涔熷悓鏍烽潰涓寸潃璇稿�氶毦浠ラ€捐秺鐨勯殰纰嶃€� 鍦ㄧ粡鍘嗕簡闀胯揪8骞寸殑闀胯窇鍚庯紝HTML5瑙勮寖缁堜簬鐡滅啛钂傝惤銆佹�e紡瀹...
2015-11-12
vue-awesome-swiper的使用以及API整理
一、先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的<span style=“color: orange;”>“vue-awesome-swiper”: “^2.5.4”&...
2018-04-26
[翻译]基于Webpack4使用懒加载分离打包React代码
原文地址:https://engineering.innovid.com/code-splitting-using-lazy-loading-with-react-redux-typescript-and-webpack-4-3ec601...
2018-03-11
AngularJS:何时应该使用Directive、Controller、Servic
AngularJS是一款非常强大的前端MVC框架。同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉。(译者注:老外真谦虚,我大天朝的码农对这些概念那是相当熟悉啊!)这些概念有: Directive(指令) Controller(控制...
2015-11-11
Bootstrap table简单使用总结
最近接触一个很棒的插件,Bootstrap table没做过前端的表示对table的印象还只停留在html的table标签那一套,用过bootstrap table之后不得不说真的很实用。 构造方式 1 、HTML <div clas...
2017-03-17
回到顶部