読者です 読者をやめる 読者になる 読者になる

yarnでReact + webpack-dev-serverな環境をつくった

Elixir

備忘録がてら書く

環境

  • PC: MacBook Pro (Retina, 15-inch, Mid 2015)
  • OS: Sierra 10.12
  • node: 6.9.1
  • yarn: 0.17.10

手順

Node環境構築

nodebrewで環境を構築。

$ brew install nodebrew
# nodebrewのPATHを通す
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zshrc
# nodebrew用のディレクトリ作成
$ mkdir -p ~/.nodebrew/src
# nodeをインストール
$ nodebrew install-binary 6.9.1
$ nodebrew use 6.9.1
# yarnをnpmでインストール
$ npm i -g yarn
# yarnのPATHを通す
$ echo 'export PATH="$HOME/.yarn/bin:$PATH"' >> ~/.zshrc

Yarn環境 + 設定

プロジェクトを作成

mkdir react_webpack
cd react_webpack

package.jsonはこんなかんじ

{
  "name": "react_webpack",
  "scripts": {
    "start": "webpack-dev-server --port 4000 --no-info --color",
    "build": "rm -rf ./dist && webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "babel-core": "^6.20.0",
    "babel-loader": "^6.2.9",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "node-sass": "^4.0.0",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  },
  "dependencies": {
    "react": "^15.4.1",
    "react-dom": "^15.4.1"
  }
}

これらをyarnでインストール

$ yarn install

Webpack設定

webpack.config.jsはこんなかんじ

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  context: __dirname + '/src',
  entry: {
    javascript: './index.jsx',
    css: './index.sass',
    html: './index.html'
  },
  output: {
    path: __dirname + '/dist',
    filename: 'index.js'
  },
  resolve: {
    extenstions: ['', '.js', '.jsx', '.html']
  },
  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loaders: ['babel']
      },
      {
        test: /\.html$/,
        loader: 'file?name=[name].[ext]'
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader")
      },
      {
        test: /\.sass$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("index.css")
  ]
}

.babelrcはこんなかんじ

{
  "presets": [
    "es2015",
    "react"
  ]
}

html, sass, jsxをつくる

$ mkdir src
$ touch src/index.jsx
$ touch src/index.sass
$ touch src/index.html

それぞれ以下のように配置

  • index.jsx
import React, { Component, PropTypes } from 'react';
import { render } from 'react-dom';

class Hello extends Component {
  constructor(props) {
    super(props)
  }

  render(){
    return (
      <h1>Hello</h1>
    )
  }
}

render(<Hello />, document.querySelector('main'))
  • index.sass
h1
  font-size: 20px
  • index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>React Webpack</title>
    <link rel="stylesheet" href="index.css">
  </head>
  <body>
    <main>
    </main>
  </body>
  <script src="index.js"></script>
</html>

実行

$ yarn build
$ yarn start
$ open http://localhost:4000

Helloと表示されてたらOK!

実際につくってみたものはこちら

所感

  • いまいち仕組みわからないでとりあえず作ってる部分もあるから、もっと公式ドキュメントみないとな

参考