Create React App(以下简称 CRA)是一个官方支持的创建 React 单页应用的脚手架,它提供了一个零配置的现代构建设置,将一些复杂工具(比如 webpack, Babel)的配置封装了起来,让使用者不用关心这些工具的具体配置,从而降低了工具的使用难度。
npx: npx 来自 npm 5.2+ 或更高版本
npx create-react-app my-app
npm: npm init <initializer>
在 npm 6+ 中可用
npm init react-app my-app
Yarn: yarn create
在 Yarn 0.25+ 中可用
yarn create react-app my-app
在新创建的项目中,可以运行一些内置命令:
npm start
或 yarn start
在开发模式下运行应用程序, 默认在浏览器打开http://localhost:3000
。如果更改代码,页面将自动重新加载。
npm test
或 yarn test
以交互模式运行测试程序。 默认情况下,运行与上次提交后更改的文件相关的测试。
npm run build
或 yarn build
将生产环境的应用程序构建到 build
目录。 它能将 React 正确地打包为生产模式中并优化构建以获得最佳性能。构建将被压缩,文件名中将包含哈希。
npm run eject
注意:这是单向操作。一旦 eject
,就不能回去了!
执行完这个命令后会将封装在 CRA 中的配置全部反编译到当前项目,这样开发者完全取得 webpack 文件的控制权,可以自定义修改webpack打包配置。
创建后,项目文件结构如下所示:
my-app
node_modules
public
favicon.ico
index.html // 页面模板
manifest.json
src
App.css
App.js
App.test.js
index.css
index.js // 项目入口
logo.svg
reportWebVitals.js
setupTests.js
.gitignore
package.json
README.md
yarn.lock
src
中的文件。 你需要将任何 JS 和 CSS 文件放在 src
中,否则 Webpack 将发现不了它们。public/index.html
中使用 public
中的文件。Create React App 分为两个包:
create-react-app
是一个全局命令行实用程序,可用于创建新项目。react-scripts
包含Create React App的脚本与配置当你运行 create-react-app
时,它始终使用最新版本的 react-scripts
创建项目,新创建的应用会获得所有新功能和改进。
CRA 将所有新特性委托给 react-scripts
, 只需要更新react-scripts
, 不需要更新 create-react-app
就可以升级CRA 的特性。比如用老版本 CRA 创建了一个项目,这个项目不具备 PWA 功能,但只要项目升级了react-scripts
包的版本就可以具备 PWA 的功能,项目本身的代码不需要做任何修改。
Create React App已经封装了webpack 配置,如果想对 webpack 配置做一些修改,这个时候应该怎么办呢?CRA提供了以下几种方式来修改 webpack 的配置:
使用 CRA 创建完项目以后,在package.json
里面提供了这样一个命令:
{
...
"scripts": {
"eject": "react-scripts eject"
},
...
}
执行yarn eject
后会将封装在 CRA 中的配置全部复制到当前项目。eject 后项目根目录下会新增 config与scripts 文件夹,修改package.json与yarn.lock文件。
config
jest
env.js
getHttpsConfig.js
modules.js
paths.js
pnpTs.js
webpack.config.js
webpackDevServer.config.js
scripts
build.js
start.js
test.js
如果使用了eject
命令,虽然扩展了 webpack 配置,但是再也享受不到 CRA 升级带来的好处了。因为react-scripts
已经是以文件的形式存在于你的项目,而不是以包的形式,所以无法对其升级。
react-scripts 是 CRA 的一个核心包,一些脚本和工具的默认配置都集成在里面,使用 CRA 创建项目默认就是使用这个包。但是 CRA 还提供了另外一种方式来创建 CRA 项目,用自定义 scripts 包的方式。
// 默认方式
$ create-react-app my-app
// 自定义 scripts 包方式
$ create-react-app my-app --scripts-version 自定义包
自定义包
可以是下面几种形式:
react-scripts
包的版本号,比如0.8.2
,这种形式可以用来安装低版本的react-scripts
包。your-scripts
,里面包含了修改过的 webpack 配置。/your/local/scripts.tgz
,通常是未发布到 npm 仓库的自定义 scripts 包,可以用 npm pack
命令生成。这种方式相对于之前的eject
是一种更灵活地修改 webpack 配置的方式,而且可以做到和 CRA 一样,通过升级 scrips 包来升级项目特性。
自定义 scripts 包的结构可以参照react-scripts
包的结构,只要修改对应的 webpack 配置文件,并安装上所需的 webpack loader 或 plugin 包就可以。
react-app-rewired 是 react 社区开源的一个修改 CRA 配置的工具,这种方式让开发者既不用eject
项目也不用自己创建 scripts 包就可以拓展webpack。
1.在 CRA 创建的项目中安装react-app-rewired
npm install react-app-rewired --save-dev
2.在项目根目录下创建config-overrides.js
文件(支持自定义文件路径)
/* config-overrides.js */
module.exports = function override(config, env) {
// 参数中的 config 就是默认的 webpack config
// 对 config 进行任意修改
config.mode = 'development';
// 一定要把新的 config 返回
return config;
}
config-overriders.js
导出的是一个函数,这个函数的签名是 const override = (oldWebpackConfig, env) => newWebpackConfig
。
3.修改scripts
命令
/* package.json */
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test",
+ "test": "react-app-rewired test",
"eject": "react-scripts eject"
}
设置自定义路径 通过package.json 的config-overrides-path
设置自定义路径:
/* package.json */
{
...
"config-overrides-path": "src/app", // src/app/config-overrides.js
...
}
默认情况下,config-overrides.js
文件导出一个函数,用于自定义Webpack配置以在开发或生产模式下编译React应用。 也可以改为此文件导出一个对象,该对象最多包含三个字段,每个字段都是一个函数。
module.exports = {
// The Webpack config
webpack: function(config, env) {
// ...add your webpack config
return config;
},
// The Jest config
jest: function(config) {
// ...add your jest config customisation...
return config;
},
// create a webpack dev server
devServer: function(configFunction) {
return function(proxy, allowedHost) {
const config = configFunction(proxy, allowedHost);
const fs = require('fs');
config.https = {
key: fs.readFileSync(process.env.REACT_HTTPS_KEY, 'utf8'),
cert: fs.readFileSync(process.env.REACT_HTTPS_CERT, 'utf8'),
ca: fs.readFileSync(process.env.REACT_HTTPS_CA, 'utf8'),
passphrase: process.env.REACT_HTTPS_PASS
};
return config;
};
},
paths: function(paths, env) {
// ...add your paths config
return paths;
},
}
编译时,react-app-rewired 会先取到 create-react-app 生成的默认的 webpack config,然后调用 override(config)
方法,对 config 进行修改,得到新的 webpack config。webpack 最终会使用这个新的 config 进行打包。
流程大致如下:
const overrides = require('../config-overrides');
const webpackConfigPath = paths.scriptVersion + "/config/webpack.config.prod";
// load original config
const webpackConfig = require(webpackConfigPath);
// override config in memory
require.cache[require.resolve(webpackConfigPath)].exports =
overrides.webpack(webpackConfig, process.env.NODE_ENV);
// run original script
require(paths.scriptVersion + '/scripts/build');
虽然react-app-rewired
的方式已经可以很方便地修改 webpack 的配置了,但也可以在自定义的 script 包中实现类似的功能。
以build.js
为例,在获取基本 webpack 配置对象和使用 webpack 对象之间加入以下代码:
// override config
const override = require(paths.configOverrides);
const overrideFn = override || ((config, env) => config);
const overrideConfig = overrideFn(config, process.env.NODE_ENV);
overrideConfig
就是修改后的 webpack 对象,最后修改调用了 webpack 对象的代码,将原来的 webpack 对象替换成修改后的 webpack 对象。
png透明 AlphaImageLoader filter:progid:DXImageTransform.Microsoft.AlphaImag...
DocumentFragment DocumentFragment 是什么 ? DocumentFragment,文档片段接口...
CSS2.0盒模型层次平面示意图和3D示意图 3像素问题及解决办法 当使用float浮动容...
我把论坛首页分为header区,信息区,内容区,页脚区。首先用一大div把这些包含进...
"Code tailor",为前端开发者提供技术相关资讯以及系列基础文章,微信关注“小和...
一. 引入外部css文件的基本样式 用 link标签引入外部样式表,其中通常要写两个属...
因为IOS最新版微信取消了浮窗功能,小程序后台狠毒用户反馈进入不方便了,目前公...
因为要做个网站,里面的内容除了大段文字之外,还有大量的表格,这就发现了表格...
xml和html都是用于操作数据或数据结构,在结构上大致是相同的,打它们在本质上却...
设计师要懂心理学读书笔记 设计师要懂心理学这本书很有趣,首先它很简单,任何对...