設定專案

你需要 Node Package Manager 來安裝專案依賴項。從 Nodejs.org 下載適用於你的作業系統的節點。節點包管理器附帶節點。

你還可以使用節點版本管理器來更好地管理節點和 npm 版本。它非常適合在不同節點版本上測試你的專案。但是，不建議用於生產環境。

一旦在系統上安裝了節點，請繼續安裝一些必要的軟體包，以便使用 Babel 和 Webpack 來完成第一個 React 專案。

在我們真正開始在終端中命令之前。看看 Babel 和 Webpack 用於什麼。

你可以通過在終端中執行 npm init 來啟動專案。按照初始設定。之後，在終端中執行以下命令 -

依賴關係：

npm install react react-dom --save

Dev Dependecies：

npm install babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 webpack webpack-dev-server react-hot-loader --save-dev

可選的 Dev 依賴項：

npm install eslint eslint-plugin-react babel-eslint --save-dev

你可以參考此示例 package.json

在專案根目錄中建立 .babelrc，其中包含以下內容：

{
  "presets": ["es2015", "stage-0", "react"]
}

（可選）在專案根目錄中建立 .eslintrc，其中包含以下內容：

{
  "ecmaFeatures": {
    "jsx": true,
    "modules": true
  },
  "env": {
    "browser": true,
    "node": true
  },
  "parser": "babel-eslint",
  "rules": {
    "quotes": [2, "single"],
    "strict": [2, "never"],
  },
  "plugins": [
    "react"
  ]
}

建立 .gitignore 檔案以防止將生成的檔案上傳到你的 git 倉庫。

node_modules
npm-debug.log
.DS_Store
dist

使用以下最低內容建立 webpack.config.js 檔案。

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'eval',
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: ['react-hot', 'babel'],
      include: path.join(__dirname, 'src')
    }]
  }
};

最後，建立一個 sever.js 檔案，以便能夠執行 npm start，內容如下：

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  historyApiFallback: true
}).listen(3000, 'localhost', function (err, result) {
  if (err) {
    return console.log(err);
  }

  console.log('Serving your awesome project at http://localhost:3000/');
});

建立 src/app.js 檔案以檢視你的 React 專案執行的操作。

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <h1>Hello, world.</h1>
    );
  }
}

在終端中執行 node server.js 或 npm start，如果你在 package.json 中定義了 start 代表什麼