構(gòu)建React開(kāi)發(fā)環(huán)境

yck 發(fā)布于2019-08-26 10:15 / 2471人閱讀

摘要：使用包管理工具，基于構(gòu)建工具，搭建開(kāi)發(fā)環(huán)境由于一些軟件安裝跟系統(tǒng)環(huán)境相關(guān)，故這里查看本文檔，需要根據(jù)自己的系統(tǒng)環(huán)境，選擇相對(duì)應(yīng)的系統(tǒng)版本。

使用Yarn包管理工具，基于Webpack構(gòu)建工具，搭建React開(kāi)發(fā)環(huán)境

由于一些軟件安裝跟系統(tǒng)環(huán)境相關(guān)，故這里查看本文檔，需要根據(jù)自己的系統(tǒng)環(huán)境，選擇相對(duì)應(yīng)的系統(tǒng)版本。

本文運(yùn)行環(huán)境

system：macos
react：16.8.6
react-dom：16.8.6
webpack：4.36.1

Yarn

Yarn 是一個(gè)快速、可靠、安全的依賴(lài)管理工具，又 faceback開(kāi)源

Yarn 通過(guò)一組豐富的命令執(zhí)行包的安裝、管理、發(fā)布等操作。

Yarn 與 Npm的許多功能是相同的，包的元數(shù)據(jù)格式也是一樣的，因此可以無(wú)痛遷移到 Yarn。

中文文檔：https://yarn.bootcss.com/docs...

MacOS系統(tǒng)安裝Yarn

brew install yarn

在一個(gè)空目錄下，用 Yarn初始化一個(gè)新項(xiàng)目

yarn init

React

react用于構(gòu)建用戶(hù)界面的 JavaScript 庫(kù)

官方文檔：https://zh-hans.reactjs.org/

安裝項(xiàng)目運(yùn)行依賴(lài) react包和 react-dom包

yarn add react react-dom

安裝項(xiàng)目開(kāi)發(fā)依賴(lài) webpack 和 webpack-cli 包

yarn add -D webpack webpack-cli html-webpack-plugin

配置webpack編譯項(xiàng)目

創(chuàng)建項(xiàng)目目錄

mkdir -p src/js src/pages

編寫(xiě)項(xiàng)目初始文件

// html
vi src/pages/index.html 




    
    Title






// javascript
vi src/js/index.js

alert("hello")

編寫(xiě)webpack配置文件

vi webpack.config.js

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

const config = {
    mode: "development",
    // 入口
    entry: {
        app: "./src/js/index"
    },
    // 輸出
    output: {
        filename: "[name].js",
        path: path.join(__dirname, "build")
    },
    // 插件，這里使用一個(gè) html-webpack-plugin插件，編譯的時(shí)候會(huì)將編譯的js文件自動(dòng)引入html文件中
    plugins: [
        new HtmlWebpackPlugin({
            filename: "index.html",
            template: "./src/pages/index.html"
        })
    ],
}

module.exports = config;

編輯package.json文件，添加一個(gè)scripts命令build

"scripts": {
    "build": "webpack"
},

使用webpack打包，在命令行運(yùn)行

yarn run build

如果沒(méi)有出錯(cuò)的話，在項(xiàng)目目錄下的build目錄中會(huì)出現(xiàn)兩個(gè)文件app.js和index.html

可以啟動(dòng)一個(gè)webserver來(lái)運(yùn)行build目錄中的文件

上面如果不出錯(cuò)的情況下，我們開(kāi)發(fā)配置webpack編譯React項(xiàng)目

編寫(xiě)文件

vi /src/js/index.js

"use strict";

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
    Hello, World!,
    document.getElementById("root")
);

react使用一種jsx語(yǔ)法，需要使用babel編譯

babel文檔：https://www.babeljs.cn/setup#...

安裝babel

yarn add -D babel-loader @babel/core

編寫(xiě)webpack配置文件

vi webpack.config.js

vi webpack.config.js

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

const config = {
    mode: "development",
    // 入口
    entry: {
        app: "./src/js/index"
    },
    // 輸出
    output: {
        filename: "[name].js",
        path: path.join(__dirname, "build")
    },
    // 插件，這里使用一個(gè) html-webpack-plugin插件，編譯的時(shí)候會(huì)將編譯的js文件自動(dòng)引入html文件中
    plugins: [
        new HtmlWebpackPlugin({
            filename: "index.html",
            template: "./src/pages/index.html"
        })
    ],
    module: {
        rules: [
            { test: /.js$/, exclude: /node_modules/, loader: "babel-loader"}
        ]
    },
}

module.exports = config;

安裝babel對(duì)react的 preset

文檔：https://www.babeljs.cn/docs/b...

yarn add -D @babel/preset-react

添加 .babelrc配置文件，并寫(xiě)入

{
  "presets": ["@babel/preset-react"]
}

一切就緒，再次運(yùn)行webpack打包

yarn run build

再次使用webserver運(yùn)行build目錄下的文件，進(jìn)行測(cè)試

ok，在這里基本就已經(jīng)完成開(kāi)發(fā)環(huán)境的搭建

優(yōu)化

我們發(fā)現(xiàn)打包后的app.js文件太大，app.js將react和react-dom源碼也打包進(jìn)了app.js文件，我們需要將其摘出來(lái)，react和react-dom可以使用官網(wǎng)上給出的CDN地址，在index.html文件用手動(dòng)引入。

再次配置webpack

vi webpack.config.js

vi webpack.config.js

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

const config = {
    mode: "development",
    // 入口
    entry: {
        app: "./src/js/index"
    },
    // 輸出
    output: {
        filename: "[name].js",
        path: path.join(__dirname, "build")
    },
    // 插件，這里使用一個(gè) html-webpack-plugin插件，編譯的時(shí)候會(huì)將編譯的js文件自動(dòng)引入html文件中
    plugins: [
        new HtmlWebpackPlugin({
            filename: "index.html",
            template: "./src/pages/index.html"
        })
    ],
    module: {
        rules: [
            { test: /.js$/, exclude: /node_modules/, loader: "babel-loader"}
        ]
    },
    // 過(guò)濾
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }
}

module.exports = config;

在index.html文件中引入react的cdn




    
    Title

再次運(yùn)行webpack打包

yarn run build

檢查打包后app.js文件是否小了？

再次啟動(dòng)一個(gè)webserver運(yùn)行測(cè)試

總結(jié)

前端工具繁多，千變?nèi)f化，不同的版本，可能相關(guān)配置都不一樣，所以我們要學(xué)會(huì)看相關(guān)官方文檔，一切以官方文檔為準(zhǔn)則，適當(dāng)?shù)泥駠魍虠棧挥弥湟猓苯觕opy文檔上的相關(guān)配置，而將有限的精力放入項(xiàng)目業(yè)務(wù)本身。

原文鏈接：https://www.mi360.cn/articles...