Create React App文档说明(一)

原创 守候你的季节 译文 JavaScript 105阅读 2019-05-11 16:43:44 举报

可用的脚本

npm run eject

不可逆操作,将配置从项目依赖中移除,从而将配置项直接暴露给用户,便于自定义配置的修改,然而官方并不推荐这样做,很可能会导致一些部署问题的出现。

浏览器支持情况

默认支持所有现代浏览器,如果需要支持 Internet Explorer 9, 10, and 11 需要 polyfills ,解决方法可以使用 react-app-polyfill

react-app-polyfill
  1. npm install react-app-polyfill
  2. Internet Explorer 9
    1. import 'react-app-polyfill/ie9'; // This must be the first line in src/index.js
    2. 导入 ie9 将默认包含 ie10、ie11
  3. 支持的特性
    1. Promise (for async / await support)
    2. window.fetch (a Promise-based way to make web requests in the browser)
    3. Object.assign (a helper required for Object Spread, i.e. { ...a, ...b })
    4. Symbol (a built-in object used by for...of syntax and friends)
    5. Array.from (a built-in static method used by array spread, i.e. [...arr])
  4. 如果需要更多的新特性并支持ie9,比如 MapSet
配置浏览器支持情况

创建工程后,默认在 package.json 下会包含浏览器支持信息,比如:

该配置控制编译后输出的 JavaScript 代码,使得编译后的代码与指定的浏览器兼容

该配置并不会为你自动导入 polyfills ,如果你需要兼容低版本浏览器,仍需自行导入 polyfills

当修改了 browserslist 配置,可能我们的配置并没有生效,这是因为 babel-loader 没有检测到 package.json 中的改变,一个最简单的解决方式就是直接删除掉 node_modules/.cache_ 文件夹,重新编译

VSCode中展示代码检查结果

  1. 安装 ESLint plugin
  2. 在项目根目录下创建 .eslintrc.json 文件
  3. 如果使用了 TypeScript,那默认的 ESLint 不再生效,它本身是不支持 TypeScript
  4. 启用 TypeScript ESLint ,在 .vscode/settings.json 下添加以下内容,没有该文件请自行创建

如果进一步修改了 .eslintrc.json 文件,这些更改只会影响编辑器自身行为,不会影响终端和浏览器中的 lint 输出,这是 Create React App 有意提供了一组最常见的错误规则

如果想强制改变编码风格,可以考虑使用 Prettier 来取代 ESLint

编辑器中启动代码调试

VSCode
  1. 首先需要安装最新版本的 VSCodeChrome Debugger Extension 插件
  2. .vscode 文件夹下新建 launch.json 配置文件,内容如下

上述配置的 URL 需要根据项目中的实际配置需要进行更改

最后通过运行 npm run start 启动应用,同时启动 debug 即可进行调试

分析打包资源体积

主要用来帮助我们找到冗余代码的来源

  1. npm install --save source-map-explorer
  2. package.jsonscripts 下新增一行如下
  3. 在生产模式下打包后运行分析脚本
    1. npm run build
    2. npm run analyze

开发模式下使用HTTPS

这个特性在 react-scripts@0.4.0 及以上版本下可用

在特定场景下我们可能会遇到这种情况,比如访问一个接口,但是该接口只为 HTTPS 提供服务。

具体配置就是将 HTTPS 环境变量设置为 true ,然后通过 npm run start 重启 dev server

Windows(cmd.exe)

set HTTPS=true&&npm start

你没看错,中间缺乏的空格是被故意去掉的

Windows(Powershell)

($env:HTTPS = "true") -and (npm start)

Linux,macOS(Bash)

HTTPS=true npm start

注意:服务器将使用自签名证书,因此您的Web浏览器在访问该页面时几乎肯定会显示警告,忽略即可

CSS Modules

这个特性在 react-scripts@2.0.0 及以上版本下可用

主要用来避免不同文件中样式命名冲突,只要将 CSS 样式文件的扩展名改为 .module.css 即为开启,针对预处理语言同样适用

使用CSS预处理语言Sass

这个特性在 react-scripts@2.0.0 及以上版本下可用

create-react-app 已经内置了 sass-loader,因此只需 安装 node-sass 便可以使用 Sass 预处理语言了。

npm install node-sass --save

安装后,重命名项目中的 *.css*.scss 即可

要在 Sass 文件之间共享变量,可以使用 Sass 导入,比如:

如果导入 node_modules_ 下的样式文件,必须以前缀 ~ 开头

当然我们也可以不使用 ~ 符号,转而使用 SASS_PATH 变量

比如设置了 SASS_PATH=node_modules:src,那么便可以向下面这样使用

该变量规定的查找路径

配置方式:在项目根目录下添加一个 .env 文件,将 SASS_PATH=node_modules:src 放进去即可

windows 系统下进行如下设置

SASS_PATH=./node_modules;./src

样式初始化

使用 create-react-app 创建的项目默认加入了 CSS Reset 的功能,只需要在 index.css 或者 App.css (官方推荐最佳位置)中 @import-normalize; 即可,重复导入将会被移除

比如在 index.css 中引入

还可以通过项目的 browserslist 控制 normalize.css的 哪些部分使用

browserslist的 的设置是 last 3 versions

browserslist的 的设置是last 2 versions

组件中添加 SVGs

这个特性在 react@16.3.0 及以上版本 与 react-scripts@2.0.0 及以上版本下可用

可以将 SVG 直接作为React组件导入进来使用

ReactComponent 告诉 Create React App 要得到一个渲染 SVG 的React 组件,而不是拿到SVG的名字

代码分割

使用 动态 import() 来实现代码分割,该方法时 stage 3中的提案,import() 函数将模块名称作为参数并返回一个 Promise

比如:

moduleA.js
App.js

这会将 moduleA.js 作为一个独立的 chunk,只有在按钮点击的时候才会被加载进来

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复