徒手擼一個簡單的React開發環境

時間 2020-02-24

原文原文鏈接

前言

現在，前端工程化愈來愈成熟，也涌現出愈來愈多的高效工具讓開發變得簡單，咱們能夠更加專一於業務層面，咱們能夠經過腳手架輕鬆搭建一個功能完善的React開發環境，可是在這樣的「方便」下，咱們愈來愈忽視了Webpack和babel的重要性，本文只是記錄經過Webpack和Babel搭建一個簡單的React環境，並不涉及理論知識與運行機制。javascript

工具

webpack 4.x
babel 7.x
react 16.x
node 10.x
npm 6.x

開始

1、初始化npm環境

mkdir react-app & cd react-app
npm init
複製代碼

初始化npm環境時會提示輸入項目信息，按需輸入便可，初始化成功以後項目目錄下會生成一個package.json和node_modules/文件夾，package.json爲npm的配置文件，裏面包含了項目信息，依賴項和其餘重要信息，node_modules/下存放項目的依賴文件。html

2、webpack安裝與配置

首先須要安裝webpack，如今已經更新到4.x，4.x的特性爲約定大於配置，省去了不少冗餘的配置項，咱們簡單配置幾行代碼就能夠完成項目的打包。前端

npm install webpack --save-dev
// 或簡寫
npm i webpack -D
複製代碼

安裝完畢以後咱們的項目下已經可使用webpack命令進行打包了，不過首先須要對webpack進行簡單配置。java

在項目目錄下新建webpack.config.jsnode

// webpack.config.js
module.exports = {
    // mode有兩個值，development和production，mode決定了webpack的構建方式
    mode: 'development'
}

複製代碼

此處對象的導出不可使用es6的exports或export default，由於webpack基於node進行構建，node原生應用的是CommonJS的模塊規範 react

咱們在沒有定義entry的狀況下，webpack會默認讀取/src/index.js，因此咱們須要在項目中新建src目錄，並在src下新建index.js文件，這個index.js就是咱們項目的入口文件了。webpack

// index.js
// 先隨便寫點什麼
console.log("HelloWorld")
複製代碼

這個時候先進行一次簡單的打包，在控制檯運行webpack命令es6

webpack ./webpack.config.js
複製代碼

等待命令執行完畢，發現項目出現了一個dist/文件夾，下面有一個main.js，這個就是咱們打包產生的文件，在webpack.config.js中若是沒有配置output，則默認會在項目的根目錄下生成dist/目錄，打包產物名爲main.js。web

爲了方便，能夠在package.json中配置命令shell

// package.json
 "scripts": {
    "build": "webpack ./webpack.config.js"
  },
複製代碼

這樣就能夠經過npm run build快速調用webpack ./webpack.config.js。

3、webpack開發環境配置

若是咱們在開發過程當中，每改一次代碼都須要從新打包的話，會大大的影響咱們的效率，因此webpack提供了一個本地開發服務工具——webpack-dev-server，能夠本地搭建一個web服務器，將打包生成的產物加載到內存中，讀寫速度更快，而且支持熱更新等提高效率的功能。

首先安裝webpack-dev-server

npm install webpack-dev-server --save-dev
複製代碼

在package.json中添加命令

"scripts": {
    "dev": "webpack-dev-server --open --compress --hot --host 127.0.0.1 --port 8080"
  },
複製代碼

webpack-dev-server更詳細的配置能夠在webpack.config.js的devServer中進行配置。

在控制檯中運行

npm run dev
複製代碼

經過瀏覽器打開http://127.0.0.1:8080/main.js，就能夠看到打包的生成物main.js。

這個時候打開的main.js並非前面dist/下的main.js，其實webpack爲了更好的開發效率，將打包生成物main.js存放在了計算機內存中，加載速度比放在磁盤中更快。

內存中有了main.js後，就須要一個內存中的html對他進行加載，這個時候須要html-webpack-plugin

首先項目中新建index.html

安裝html-webpack-plugin

npm install html-webpack-plugin --save-dev
複製代碼

在webpack.config.js中進行簡單配置

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入html-webpack-plugin

module.exports = {
  mode: 'development',
  // webpack插件配置
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './index.html') // 用path模塊將相對路徑轉換成絕對路徑
    })
  ]
}
複製代碼

從新運行npm run dev，在瀏覽器打開http://127.0.0.1:8080，能夠看到頁面被渲染，並自動將main.js掛載在了頁面中。

4、React環境配置

1. 安裝`react`和`react-dom`

npm install react react-dom --save
複製代碼

react爲React的核心庫，用於構建Virtual Dom以及實現MVVM模型
react-dom主要負責將Virtual Dom轉換成dom對象

2. 在`/src/index.js`撰寫React代碼

import React from 'react';
import ReactDom from 'react-dom'

// create by React element
const div = React.createElement(
  'button',
  {
    onClick: () => alert('Hello World')
  },
  'hello'
)

ReactDom.render(div, document.getElementById("app"));
複製代碼

在index.html中添加id爲app的div

<body>
    <div id="app"></div>
</body>
複製代碼

從新運行npm run dev

頁面已經成功渲染出React元素

3. 使用JSX

使用React.createElement()能夠經過JS對象的形式構建出Virsual Dom，可是卻大大的下降了代碼的可讀性，經過JSX能夠這樣寫React元素

const div = <div>Hello World</div>
複製代碼

JSX能夠將編寫的html格式轉譯成React.createElement()建立，能夠在Babel官網進行驗證

在webpack中配置Babel便可達到效果，Babel官網提供了React環境的配置教程

安裝babel-loader @babel/preset-react @babel/core

npm install babel-loader @babel/core @babel-react --save-dev
複製代碼

在webpack.config.js中進行模塊配置

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /.js|.jsx$/, // 正則匹配.js和.jsx文件用babel-loader進行處理
        use: 'babel-loader',
        exclude: /node_modules/ // 不處理node_modules/文件夾下的文件
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './index.html')
    })
  ]
}
複製代碼

再添加babel配置文件

在項目根目錄下添加.babelrc.json或是babel.config.json

{
  "presets": [
    [
      "@babel/preset-react"
    ]
  ]
}
複製代碼

關於babel的學習，有一篇文章很好的文章，點擊跳轉

修改react代碼

import React from 'react';
import ReactDom from 'react-dom'

// create by jsx
const div = <button onClick={() => console.log(1111)}>Hello</button>

ReactDom.render(div, document.getElementById("app"));
複製代碼

從新運行npm run dev

成功集成JSX！！！

小結

webpack在前端工程化中起到很是重要的做用，前端「現代化」項目基本已經離不開webpack了，因此我但願本身能夠進一步的去探索webpack的奧祕，瞭解它到底是如何實現這一切高能的操做，化「神奇」爲「知識」，也但願本身不要以學習輪子爲惟一目標，這樣路只會越走越窄。PS：結尾真的好難寫。。。😫