配置React開發環境教程

時間 2019-12-10

原文原文鏈接

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

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

教程是基於macOS的，Nodejs得提早安裝好。個人Nodejs和npm的版本以下react

node -v
v6.9.2

npm -v
3.10.9

Yarn安裝和配置

咱們在 macOS 下能夠經過brew去安裝，以下webpack

brew update
brew install yarn

Yarn 下載的包或者模塊都是跟npm一個源的，由於某些緣由，下載速度很是慢，難受，因此咱們得換源git

Yarn 換源和npm的源是一致的，都是共享.npmrc的配置信息，因此修改給 npm 換源就是等於給 Yarn 換源，以下es6

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

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

vim ~/.npmrc

項目初始化

打開你的終端，新建文件夾而後進入該文件夾，用yarn init去作初始化,過程相似npm init，會有幾個選項須要你填寫，你能夠根據你的須要去填寫，這裏我就直接一路回車就能夠了。web

mkdir react-demo
cd react-demo
yarn init

init完以後，就會提示success Saved package.json，說明初始化成功，咱們能夠查看一下package.json有什麼東西npm

vim package.json

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

webpack安裝和配置

yarn add webpack webpack-dev-server path

安裝完畢，你會發現當前目錄多了個yarn.lock，這個文件是Yarn用來鎖定當前的依賴，不用擔憂json

如今，咱們已經安裝好webpack了，咱們須要一個配置文件用來執行，以下

touch webpack.config.js

而後更新該文件內容爲以下

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/ }
    ]
  }
}

從配置文件內容能夠看出，爲了讓webpack運行，咱們須要一個入口entry和一個輸出output

爲了能讓JSX代碼或者是ES6的代碼也能正常在瀏覽器運行，咱們須要loaders去裝載babel-loader

更多的loaders咱們能夠查看 webpack文檔

Babel安裝和配置

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

在webpack配置過程當中，咱們用到了babel-loader,除了這個外，咱們一樣須要babel的其餘依賴

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

安裝完畢，咱們還須要去配置Babel，新建一個文件爲.babelrc

touch .babelrc

而後更新該文件內容爲以下

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

webpack中的loader的 babel-loader 就是根據這個去執行

配置入口文件

如今咱們的目錄結構以下

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

咱們須要建立新的文件夾，同時在新文件夾內新建index.js和index.html文件

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

而後咱們更新一下index.js的內容爲

console.log('Hello world!')

一樣地，咱們也要更新一下index.html內容爲

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React App Setup</title>
  </head>
  <body>
    <div id="root">

    </div>
  </body>
</html>

index.html是咱們react組件運行在瀏覽器上的載體，react組件編寫是jsx，同時也用到了es6，因爲大多數瀏覽器是不支持es6和jsx，因此咱們必須經過Babel編譯這些代碼，而後綁定輸出顯示在index.html上。

同時咱們還須要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,而後建立它的實例，而後配置template、filename和inject，其中inject: 'body'是告訴插件添加JavaScript到頁尾，在閉合body標籤前

爲了能夠運行它，咱們須要配置package.json,在"dependencies": {}代碼塊前插入以下代碼

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

而後咱們就能夠運行了

yarn start

終端出現以下內容

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

咱們打開瀏覽器，輸入http://localhost:8080/，在開發者工具的Console，發現有一段信息爲Hello world!

react安裝與配置

yarn add react react-dom

而後進入client目錄，建立組件

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

如今咱們項目目錄結構以下

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

而後咱們更新一下App.jsx文件的內容以下

import React from 'react';

export default class App extends React.Component {
  render() {
    return (
     <div style={{textAlign: 'center'}}>
        <h1>Hello World Again</h1>
      </div>);
  }
}

咱們還須要修改一下咱們的入口文件index.js,替換內容爲以下

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

ReactDOM.render(<App />, document.getElementById('root'));

而後在終端輸入yarn start

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

至此，經過 Yarn 包管理，配置webpack和Babel，去搭建編寫react組件的開發環境的新手向教程就此完畢

歡迎訪問個人博客~ https://www.linpx.com/