摘要：這是一篇新手向文章，主要是記錄一下使用過程，希望能給予別人一些幫助和提示用做包管理用做和語法編譯器做模塊管理和打包教程是基于的，得提前安裝好。

這是一篇新手向文章，主要是記錄一下使用過程，希望能給予別人一些幫助和提示

用 Yarn 做包管理
用 Babel 做jsx和es6語法編譯器
Webpack 做模塊管理和打包

教程是基于macOS的，Nodejs得提前安裝好。我的Nodejs和npm的版本如下

node -v
v6.9.2

npm -v
3.10.9

我們?cè)?macOS 下可以通過brew去安裝，如下

brew update
brew install yarn

Yarn 下載的包或者模塊都是跟npm一個(gè)源的，因?yàn)槟承┰?，下載速度非常慢，難受，所以我們得換源

Yarn 換源和npm的源是一致的，都是共享.npmrc的配置信息，所以修改給 npm 換源就是等于給 Yarn 換源，如下

npm set registry https://registry.npm.taobao.org
npm set disturl https://npm.taobao.org/dist
npm cache clean

通過查看.npmrc文件檢查是否更換源成功

vim ~/.npmrc

打開你的終端，新建文件夾然后進(jìn)入該文件夾，用yarn init去做初始化,過程類似npm init，會(huì)有幾個(gè)選項(xiàng)需要你填寫，你可以根據(jù)你的需要去填寫，這里我就直接一路回車就可以了。

mkdir react-demo
cd react-demo
yarn init

init完之后，就會(huì)提示success Saved package.json，說明初始化成功，我們可以查看一下package.json有什么東西

vim package.json

{
    "name": "react-demo",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT"
}

yarn add webpack webpack-dev-server path

安裝完畢，你會(huì)發(fā)現(xiàn)當(dāng)前目錄多了個(gè)yarn.lock，這個(gè)文件是Yarn用來鎖定當(dāng)前的依賴，不用擔(dān)心

現(xiàn)在，我們已經(jīng)安裝好webpack了，我們需要一個(gè)配置文件用來執(zhí)行，如下

touch webpack.config.js

然后更新該文件內(nèi)容為如下

const path = require("path");
module.exports = {
  entry: "./client/index.js",
  output: {
    path: path.resolve("dist"),
    filename: "index_bundle.js"
  },
  module: {
    loaders: [
      { test: /.js$/, loader: "babel-loader", exclude: /node_modules/ },
      { test: /.jsx$/, loader: "babel-loader", exclude: /node_modules/ }
    ]
  }
}

從配置文件內(nèi)容可以看出，為了讓webpack運(yùn)行，我們需要一個(gè)入口entry和一個(gè)輸出output

為了能讓JSX代碼或者是ES6的代碼也能正常在瀏覽器運(yùn)行，我們需要loaders去裝載babel-loader

更多的loaders我們可以查看 webpack文檔

yarn add babel-loader babel-core babel-preset-es2015 babel-preset-react --dev

在webpack配置過程中，我們用到了babel-loader,除了這個(gè)外，我們同樣需要babel的其他依賴

babel-preset-es2015 和 babel-preset-react這兩個(gè)是 Babel 的插件，告訴Babel將es2015和react的代碼編譯為Vanilla JS

安裝完畢，我們還需要去配置Babel，新建一個(gè)文件為.babelrc

touch .babelrc

然后更新該文件內(nèi)容為如下

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

webpack中的loader的 babel-loader 就是根據(jù)這個(gè)去執(zhí)行

現(xiàn)在我們的目錄結(jié)構(gòu)如下

|-- node_modules
|-- .babelrc
|-- package.json
|-- webpack.config.js
|-- yarn.lock

我們需要?jiǎng)?chuàng)建新的文件夾，同時(shí)在新文件夾內(nèi)新建index.js和index.html文件

mkdir client
cd client
touch index.js
touch index.html

然后我們更新一下index.js的內(nèi)容為

console.log("Hello world!")

同樣地，我們也要更新一下index.html內(nèi)容為

index.html是我們r(jià)eact組件運(yùn)行在瀏覽器上的載體，react組件編寫是jsx，同時(shí)也用到了es6，由于大多數(shù)瀏覽器是不支持es6和jsx，所以我們必須通過Babel編譯這些代碼，然后綁定輸出顯示在index.html上。

同時(shí)我們還需要html-webpack-plugin包為我們生成html

cd ..
yarn add html-webpack-plugin

安裝完成后，打開webpack.config.js然后添加下面配置信息

const path = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin");
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: "./client/index.html",
  filename: "index.html",
  inject: "body"
})

module.exports = {

    ...

    module: {
        loaders: [
            ...
        ]
    },

    plugins: [HtmlWebpackPluginConfig]
}

我們引入html-webpack-plugin,然后創(chuàng)建它的實(shí)例，然后配置template、filename和inject，其中inject: "body"是告訴插件添加JavaScript到頁(yè)尾，在閉合body標(biāo)簽前

為了可以運(yùn)行它，我們需要配置package.json,在"dependencies": {}代碼塊前插入如下代碼

"scripts": {
    "start": "webpack-dev-server"
},

然后我們就可以運(yùn)行了

yarn start

終端出現(xiàn)如下內(nèi)容

Project is running at http://localhost:8080/

我們打開瀏覽器，輸入http://localhost:8080/，在開發(fā)者工具的Console，發(fā)現(xiàn)有一段信息為Hello world!

yarn add react react-dom

然后進(jìn)入client目錄，創(chuàng)建組件

cd client
mkdir components
cd components
touch App.jsx
cd ../..

現(xiàn)在我們項(xiàng)目目錄結(jié)構(gòu)如下

|-- node_modules
|-- client
     |-- components
         |-- App.jsx
     |-- index.html
     |-- index.js
|-- .babelrc
|-- package.json
|-- webpack.config.js
|-- yarn.lock

然后我們更新一下App.jsx文件的內(nèi)容如下

import React from "react";

export default class App extends React.Component {
  render() {
    return (
     

        
Hello World Again
      
);
  }
}

我們還需要修改一下我們的入口文件index.js,替換內(nèi)容為如下

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App.jsx";

ReactDOM.render(, document.getElementById("root"));

然后在終端輸入yarn start

刷新http://localhost:8080/,就能看到Hello World Again

至此，通過 Yarn 包管理，配置webpack和Babel，去搭建編寫react組件的開發(fā)環(huán)境的新手向教程就此完畢

歡迎訪問我的博客~ https://www.linpx.com/