create-react-app version2.xをためす

「そろそろ出すよ。試してね」というIssueがあったので早速試してみました。インストール create-react-appを使っている身として、v2-betaにあげて事故るのはつらいです。なのでnpxを使ってプロジェク […]

広告ここから

広告ここまで

インストール

create-react-appを使っている身として、v2-betaにあげて事故るのはつらいです。なのでnpxを使ってプロジェクトを作ります。

$ npx create-react-app@next --scripts-version=@next PROJECT_NAME
$ cd PROJECT_NAME

ディレクトリ構成

ざっとみたところでは、v1とさほど変化なさそうです。

$ tree -L 2 -I node_modules
.
├── README.md
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── serviceWorker.js
└── yarn.lock

起動

yarn startで起動します。

Hello World的画面がv1からかなり変わりました。

対応ブラウザに変化

Issueの方にも書かれていますが、IE9 / IE 10 / IE11のサポートが打ち切られています。package.jsonにもbrowserslistの記述が増えました。

{
  "name": "example",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-scripts": "2.0.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

yarn add react-app-polyfillした後に、import 'react-app-polyfill/ie11'のように書くことでサポートさせることは可能だそうです。が、「Facebookもサポート切り始めましたよ」とクライアントに言ってしまう方がストレスがない気はします。

そのほかにもWebpack4対応など、色々変更点がある様子です。興味がある方は是非。

Last call for Create React App v2