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対応など、色々変更点がある様子です。興味がある方は是非。

    Last call for Create React App v2

    広告ここから
    広告ここまで
    Home
    Search
    Bookmark