关于Create-react-app2.0

国庆回来看到React Blog的文章，说官方手脚架create-react-app出了2.0，主要是在背后帮我们集成了sass、babel7、webpack4、Jest23等工具，让我们可以更专注在业务代码上。看意思是以后也会跟踪这些开发链工具的大版本。

博文中声称以后直接执行create-react-app会默认使用2.0版本。

我这里梳理下：

1.如果还是想使用1.x版本的create-react-app，可以敲：

create-react-app --scripts-version=react-scripts@1.x

 

2.如果想将目前基于create-react-app项目升级到2.0版本

对于还没eject的项目，打开项目根目录的package.json，将dependencies中的react-scripts一行的版本号改为2.03:

"react-scripts": "2.0.3",
...

再在项目终端输入：npm install 即可（之后就可以使用2.0的特性了）。

升级后，执行npm start会弹出提示，询问你想支持的浏览器，敲入Y选择默认支持的浏览器列表即可(其实就是帮你添加browserslist，以后可以自己在package.json里改)。

对于已经eject的项目，找到eject那次的commit，revert(恢复)它，然后执行上面的升级，再eject。

    我自己试了下，发现直接create-react-app生成新项目会报错，"cant find module lodash xxx"什么的，如果大家有同样的情况，执行下面三行代码即可：

npm cache clean --force 
npm i 
npm i -g create-react-app 

 

3.create-react-app2.0提供的所谓新特性，我这里只实测一些比较常用的：

sass：以往我们使用create-react-app搭建项目，想使用sass，必须安装node-sass，然后改写package.json的scripts命令集，如：

    "build-css": "node-sass-chokidar src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build-js": "react-scripts build",
    "build": "npm-run-all build-css build-js",

开发时，递归地在文件目录中编译.scss文件生成.css文件。并且在组件中只能引入css文件。

如今从2.0开始，我们只需要npm i node-sass或yarn add node-sass，不必改写scripts命令集，即可直接使用.scss文件：直接创建一个.scss文件，然后在.js文件中import './xx.scss' 即可。每次刷新，create-react-app底层都会自动帮我们编译样式文件并导入项目中。

css modules：c-r-a2.0开始css modules也是开箱即用：

只需要把 样式文件 命名为：[name].module.css

经css modules处理后导入项目时，命名会变成[filename]_[classname]_[hash]

如果同时使用了sass和css modules，只需要把sass文件命名为[name].module.scss即可。如下：

//Button.module.css
.error {
  background-color: red;
}

//.js
import styles from './Button.module.css'; // Import css modules stylesheet as styles

class Button extends Component {
  render() {
    // reference as a js object
    return <button className={styles.error}>Error Button</button>;
  }
}

最后得到的是：

<button class="Button_error_ax7yz"></div>

babel7:也就是说c-r-a2.0默认使用babel7，而babel7是最近三年来babel最大的改版，babel7官方文章。babel7号称转译更快，伴随升级工具、JSconfigs、 config "overrides"、并对压缩提供更多选择, 支持JSX Fragments, TypeScript, new proposals等。

我这里总结几个重大的改变：

1. babel7不再支持node6以下的版本。

2. babel7开始，babel package以后都转用scoped 命名，也就是：

• babel-cli -> @babel/cli
• babel-core -> @babel/core
• babel-preset-env -> @babel/preset-env

3. babel7开始，不再使用年度作为配置的前缀（如preset-es2015等），一律用@babel/preset-env替代。

4. 也不再使用提案阶段的前缀（如@babel/preset-stage-0），且部分还处于提案中的js实现将从@babel/polyfill中移除。

github上有人询问那以后想使用这些提案中的实现如何引入，有人回答说可以直接在core-js包中引入：

import "core-js/fn/array/flatMap";

这是迁移到v7的md。

5. 所有TC39 proposal 的plugin包名称中的transform将改为proposal：如“@babel/plugin-transform-class-properties”将变成“@babel/plugin-proposal-class-properties”。

当然，对我们开发者而言，最直接的福利是支持TS和JSX的fragment语法。

 

postcss:c-r-a2.0自带了postcss(实际上是postcss-preset-env)，我们会看到项目的package.json中有browserslist字段，用来列出我们想兼容的浏览器及其版本。c-r-a2.0默认帮我们设置为ie11以上（欧美人真好啊不用兼顾老旧浏览器）。我们可以自己添加ie8-11上去：

  "browserslist": [
    ">0.2%",
    "not dead",
    "ie >= 8",
    "Firefox > 20",
    "not op_mini all"
  ]

然后npm start项目，就能看到postcss生效了：

其实Browserslist是一个单独的工具，用来配合前端工具链中不同工具使用以达到定向兼容目的。

browserslist的Full List介绍了可以往数组中填写的字符串格式规则，如果对自己写的字符串格式不确定，可以在https://browserl.ist/中检测。

 

svg：我们可以直接将svg文件独立import进来，作为react组件使用。

import { ReactComponent as Logo } from './logo.svg'; //固定方式
const App = () => (
  <div>
    {/* Logo is an actual React component */}
    <Logo />
  </div>
);

另一种方式是像引入图片一样import xx from ‘path/to/svg’得到一个字符串值，然后赋予svg的src。

 

另外支持webpack4、Jest23以及node和yarn的plug那些就不写了，大家有兴趣直接看博文。

最后是一些需要注意的点：

1.create-react-app将不再支持6.0以下版本的node

2.对于旧浏览器如ie9-11的补丁(主要是fetch、promise等语言特性)，被独立出来放到一个包中：react-app-polyfill

3.基于create-react-app2.0的项目，代码中不可再使用require.ensure，而是动态import()

4.对.mjs文件的支持暂时被移除

5.propTypes部分的代码在生产环境自动移除

6.Jest环境现在自动包含jsdom

7.之前create-react-app支持在package.json中设置一个object/string值的proxy字段实现跨域代理，现在改变了。object形式被废弃，改为支持自定义proxy模块。

如果大家的项目中用不到proxy功能，或者proxy值为一个字符串值，就不用做任何改变。如果你们的proxy是个Object对象，就要做如下升级处理：

  1.npm安装http-proxy-middleware：

npm install http-proxy-middleware//yarn add http-proxy-middleware

  2.创建src/setupProxy.js文件，将原本package.json中proxy字段的Object的键值内容拷贝过去，如下：

//package.json
"proxy": {
  "/data/cityinfo/*.html": {
    "target": "http://www.weather.com.cn/",
    "changeOrigin": true
    }
}

//setupProxy.js
const proxy = require("http-proxy-middleware");

module.exports = function(app) {
  app.use(
    proxy("/data/cityinfo/*.html", {
      target: "http://www.weather.com.cn/",
      changeOrigin: true
    })
  );
};

可见，形式如express中间件，语法是固定的，只要关注proxy()第一二个参数。

最后将package.json中原本的proxy字段那部分删掉即可。我自己试了下，代理访问中国天气网的api，没问题。

上面的setupProxy.js官方称之为custom proxy module。Proxying API Requests in Development这部分有更详尽的介绍，但大体上就是上面的用法了。