深度解析React以create-react-app为基础建立项目

时间 2019-11-09

标签深度解析 react create app 基础建立项目栏目 React 繁體版

原文原文链接

这篇文章主要介绍了react以create-react-app为基础建立项目，写的十分的全面细致，具备必定的参考价值，对此有须要的朋友能够参考学习下。若有不足之处，欢迎批评指正。css

什么是create-react-apphtml

create-react-app是一个js库，使用它可以很方便地创建react项目，免去了创建react项目时配置webpack、调试服务器、运行脚本等麻烦，你只须要使用这个库，即可以一键完成react项目的建立初始化项目前端

注：用“[ ]”包裹的都是可自定义的内容，例如：cd [project-name]，实际上多是cd my-app，也多是cd my-project。总之“[ ]”包裹的内容，只表示上下文里相互对应的变量。vue

npm install -g create-react-app 
  
create-react-app [project-name] 
cd [project-name]
复制代码

运行完以上命令就已经处在新建的项目中了，此时运行npm run start和npm run build了。可是，默认全部配置是隐藏起来的，要想自定义配置，须要运行一个命令：node

npm run eject
复制代码

此时会提示，该命令不可逆，是否继续，输入y，这样全部配置项就都出来了。这时候也能够作一些定制化的配置了，好比：react

修改build后的output位置webpack

js / css / img等静态资源会默认输出到 build -> static 下面，其配置项在config -> webpack.config.prod.js 里。git

js在output属性里，大约第60行；
css在开头的cssFilename变量声明，大约第38行；
图片等在module -> rules的loader配置里，大约第143行；

map文件由devtool属性控制，若是不想要map，注释掉就能够，大约第57行；github

manifest.json在ManifestPlugin的配置里，大约294行；web

基础模板在HtmlWebpackPlugin的配置里，不过能够看到，是引的 ‘./paths.js' 文件，因此要修改 config -> paths.js 里面的 appHtml 属性；

默认在build时会清空build目录，配置项是scripts -> build.js 里的 fs.emptyDirSync(paths.appBuild); 这一句，注释掉就不会把老文件删掉了（灰度发布的时候可能会用到）；

不eject其余修改配置的方法

除了 npm run eject 暴露出全部配置文件外，还有其余办法修改配置，因为本文主题缘由不作展开，仅给出相关链。

一个（部分人认为）比较优雅的方法，即引入 react-app-rewired 插件来实现配置覆盖。须要在根目录新建一个 config-overrides.js 文件，想配置啥就写啥（怎么又多出来一种配置。。。），还须要重写下npm start等相关命令，详情点击连接查看。

另外一个可参考create-react-app的git主页上推荐的Adding a CSS Preprocessor (Sass, Less etc.) 例子。大概思路就是先安装一个node环境可编译sass的插件node-sass-chokidar，而后利用npm-run-all同时运行npm start 和 watch-css（监听sass文件的命令）。我的感受绕了个大圈，仍是再议吧。。。

react等做为全局变量不打包

为了利用cdn，咱们常会在页面里引用react或其余相似库的script标签，这样在浏览器环境里就有了相应的全局变量，同时减小了js的体积。下面以react为例。

首先在config -> webpack.config.prod.js 的配置里加入以下代码：

module.exports = { 
 ... 
 externals: { 
 'react': 'React', 
 'react-dom': 'ReactDOM'
 }, //欢迎加入前端全栈开发交流圈一块儿吹水聊天学习交流：864305860
 ... 
} 
复制代码

ey对应的是库的名字，value对应的是全局变量的名字。这里要注意，全局变量的名字要与代码中import的名字一致，要保证规范。另外，此处要修改下 html-webpack-plugin 插件配置的模板文件，由于须要加入全局变量，因此加入相应的script便可。以 public -> index.html 为例：

<!DOCTYPE html> 
<html lang="en"> 
 <head> //欢迎加入前端全栈开发交流圈一块儿吹水聊天学习交流：864305860
 <meta charset="utf-8"> 
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 <meta name="theme-color" content="#000000"> 
 <!-- 
  code here 
 -->
 </head> 
 <body> 
 <noscript> 
  You need to enable JavaScript to run this app. 
 </noscript> 
 <div id="root"></div> 
 <!-- 
  code here 
 -->
<!-- 新插入的两个js -->
 <script src="http://st01.chrstatic.com/themes/chr-cdn/react/v0.14.8/react.min.js"></script> 
 <script src="http://st01.chrstatic.com/themes/chr-cdn/react/v0.14.8/react-dom.min.js"></script> 
 </body> //欢迎加入前端全栈开发交流圈一块儿吹水聊天学习交流：864305860
</html> 
复制代码

问：既然浏览器里面都有了全局变量，如window.React，那么代码里面其实就不用 import React from 'react' 了，更进一步，若是连react都不用引了，那么设置externals又有什么用呢（这个地方好好缕缕，是否是这个理）？答：若是按照上面所说，去掉import和external，build出来的文件是能够顺利的在浏览器端运行的。可是若是开发的时候是起的server，那么server端就无法分析引用了，也就无法作到热更新了，另外，对于先后端同构来讲，服务端也是找不到依赖的。因此，若是你是开着静态文件的监听，而且手动刷新浏览器的话，不import和external理论上是没问题的。

安装sass或less（以sass为例）

npm install sass-loader node-sass --save-dev
复制代码

或者

npm install less-loader less --save-dev
复制代码

安装后修改config -> webpack.config.dev.js 和 webpack.config.prod.js，分别在css的loader配置里面修改两处：一是 test: /.css$/ 增长scss和sass；二是use里面最后再加个loader，直接加 "sass-loader" 就能够了，也不用配置别的了（less同）。

//test: /\.css$/ 
test: /\.(css|scss|sass)$/ 
... //欢迎加入前端全栈开发交流圈一块儿吹水聊天学习交流：864305860
use:[ 
 { 
 ... 
 }, 
 "sass-loader"
]
复制代码

添加ant-design

npm install antd babel-plugin-import --save-dev 
复制代码

在config -> webpack.config.dev.js 和 webpack.config.prod.js 里（或者 .babelrc 文件）的babel-loader的options配置里，加入以下代码：

plugins: [ 
 ['import', { libraryName: 'antd', style: 'css' }] // `style: true` 会加载 less 文件 
]//欢迎加入前端全栈开发交流圈一块儿吹水聊天学习交流：864305860
复制代码

若是启用了 style:true 那就必须是装less了

结语

感谢您的观看，若有不足之处，欢迎批评指正。

本次给你们推荐一个免费的学习群，里面归纳移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。对web开发技术感兴趣的同窗，欢迎加入Q群：864305860，无论你是小白仍是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时天天更新视频资料。最后，祝你们早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。