Nekonote

Nekonote(ねこのて)もかりたい

【Reactを始める方法】第6回 設定編 - Babel

このエントリーをはてなブックマークに追加

Reactを始める方法

tags: node react babel webpack

【Reactを始める方法】第6回 設定編 - Babel


連載の記事


今回やること

  • Babel の設定ファイルを作る

Babelの設定ファイル


Babelの設定ファイルを作る。


type nul > .babelrc

.babelrc

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        "react-hot-loader/babel",
        "@babel/plugin-syntax-dynamic-import",
        "@babel/plugin-syntax-import-meta",
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-proposal-json-strings",
        [
            "@babel/plugin-proposal-decorators",
            {
                "legacy": true
            }
        ],
        "@babel/plugin-proposal-function-sent",
        "@babel/plugin-proposal-export-namespace-from",
        "@babel/plugin-proposal-numeric-separator",
        "@babel/plugin-proposal-throw-expressions"
    ]
}

package.json


起動のための script を追加します。


{
  
  ...
  
  "scripts": {
    "develop": "webpack-dev-server --open --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js",
  },

  ...
  
}

追加したコマンドについて

このタイミングでは、まだ使えないですけど…


  • 開発環境で起動するコマンド
npm run develop

  • 本番環境に配置するためにビルドするコマンド
npm run build

これで Babel の設定は完了です。

次回は いよいよReactで実装をしていきます。


おすすめ 記事