react以create-react-app为基础创建项目的示例分析

这篇文章将为大家详细讲解有关react以create-react-app为基础创建项目的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联自2013年起，先为正定等服务建站，正定等地企业，进行企业商务咨询服务。为正定企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

什么是create-react-app

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

首先，要先利用create-react-app创建一个react项目，可参考https://github.com/facebookincubator/create-react-app

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

npm install -g create-react-app 
 
create-react-app [project-name] 
cd [project-name]

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

npm run eject

此时会提示，该命令不可逆，是否继续，输入y，这样所有配置项就都出来了。这时候也可以做一些定制化的配置了，比如：

修改build后的output位置

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

1. js在output属性里，大约第60行 ；

2. css在开头的cssFilename变量声明，大约第38行；

3. 图片等在module -> rules的loader配置里，大约第143行；

map文件由devtool属性控制，如果不想要map，注释掉就可以，大约第57行；

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

基础模板在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' 
 }, 
 ... 
}

key对应的是库的名字，value对应的是全局变量的名字。这里要注意，全局变量的名字要与代码中import的名字一致，要保证规范。

另外，此处要修改下 html-webpack-plugin 插件配置的模板文件，因为需要加入全局变量，所以加入相应的script即可。以 public -> index.html 为例：