create-react-app version2.xをためす
「そろそろ出すよ。試してね」というIssueがあったので早速試してみました。 インストール create-react-appを使っている身として、v2-betaにあげて事故るのはつらいです。なのでnpxを使ってプロジェク […]
広告ここから
広告ここまで
目次
「そろそろ出すよ。試してね」というIssueがあったので早速試してみました。
インストール
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対応など、色々変更点がある様子です。興味がある方は是非。