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

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

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

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

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

本文運行環(huán)境

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

Yarn

Yarn 是一個快速、可靠、安全的依賴管理工具，又 faceback開源

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

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

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

MacOS系統(tǒng)安裝Yarn

brew install yarn

在一個空目錄下，用 Yarn初始化一個新項目

yarn init

React

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

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

安裝項目運行依賴 react包和 react-dom包

yarn add react react-dom

安裝項目開發(fā)依賴 webpack 和 webpack-cli 包

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

配置webpack編譯項目

創(chuàng)建項目目錄

mkdir -p src/js src/pages

編寫項目初始文件

// html
vi src/pages/index.html 




    
    Title






// javascript
vi src/js/index.js

alert("hello")

編寫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")
    },
    // 插件，這里使用一個 html-webpack-plugin插件，編譯的時候會將編譯的js文件自動引入html文件中
    plugins: [
        new HtmlWebpackPlugin({
            filename: "index.html",
            template: "./src/pages/index.html"
        })
    ],
}

module.exports = config;

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

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

使用webpack打包，在命令行運行

yarn run build

如果沒有出錯的話，在項目目錄下的build目錄中會出現(xiàn)兩個文件app.js和index.html

可以啟動一個webserver來運行build目錄中的文件

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

編寫文件

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語法，需要使用babel編譯

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

安裝babel

yarn add -D babel-loader @babel/core

編寫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")
    },
    // 插件，這里使用一個 html-webpack-plugin插件，編譯的時候會將編譯的js文件自動引入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對react的 preset

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

yarn add -D @babel/preset-react

添加 .babelrc配置文件，并寫入

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

一切就緒，再次運行webpack打包

yarn run build

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

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

優(yōu)化

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

再次配置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")
    },
    // 插件，這里使用一個 html-webpack-plugin插件，編譯的時候會將編譯的js文件自動引入html文件中
    plugins: [
        new HtmlWebpackPlugin({
            filename: "index.html",
            template: "./src/pages/index.html"
        })
    ],
    module: {
        rules: [
            { test: /.js$/, exclude: /node_modules/, loader: "babel-loader"}
        ]
    },
    // 過濾
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }
}

module.exports = config;

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




    
    Title

再次運行webpack打包

yarn run build

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

再次啟動一個webserver運行測試

總結(jié)

前端工具繁多，千變?nèi)f化，不同的版本，可能相關(guān)配置都不一樣，所以我們要學(xué)會看相關(guān)官方文檔，一切以官方文檔為準(zhǔn)則，適當(dāng)?shù)泥駠魍虠?，不用知其意，直接copy文檔上的相關(guān)配置，而將有限的精力放入項目業(yè)務(wù)本身。

原文鏈接：https://www.mi#/articles...

云服務(wù)器 GPU云服務(wù)器 docker構(gòu)建環(huán)境 java環(huán)境構(gòu)建 react開發(fā)神器 docker react 開發(fā)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/105862.html

發(fā)表評論

登陸后可評論

0條評論

yck

男|高級講師

我要關(guān)注我要私信

TA的文章

dart系列之:在dart中使用生成器

閱讀 2344·2021-11-23 09:51
電子郵件營銷哪家好？摩杜云如何？

閱讀 1154·2021-11-22 15:35
【STM32】標(biāo)準(zhǔn)庫與HAL庫對照學(xué)習(xí)教程八--串口通信詳解

閱讀 5425·2021-11-22 09:34
親測在云服務(wù)器部署B(yǎng)itwarden私有密碼管理存儲工具

閱讀 1745·2021-10-08 10:13
UCloud全球大促活動：1核1G國內(nèi)北上廣香港云服務(wù)器最低2元/月，日本美國新加坡VPS僅5元/月

閱讀 3083·2021-07-22 17:35
用HBuilder打包簡單項目（vue項目）APP的步驟

閱讀 2720·2019-08-30 15:56
使用vue完成微信公眾號網(wǎng)頁小記

閱讀 3158·2019-08-29 18:44
Flutter樣式和布局控件簡析(二)

閱讀 3192·2019-08-29 15:32

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

Hello, World!

相關(guān)文章

**webpack工程化集成React技術(shù)棧（一）**

React文檔翻譯系列（一）安裝

**企業(yè)級React項目的個人構(gòu)建總結(jié)**

構(gòu)建前端項目

webpack優(yōu)化

發(fā)表評論

0條評論

yck

男|高級講師

TA的文章

dart系列之:在dart中使用生成器

電子郵件營銷哪家好？摩杜云如何？

【STM32】標(biāo)準(zhǔn)庫與HAL庫對照學(xué)習(xí)教程八--串口通信詳解

親測在云服務(wù)器部署B(yǎng)itwarden私有密碼管理存儲工具

UCloud全球大促活動：1核1G國內(nèi)北上廣香港云服務(wù)器最低2元/月，日本美國新加坡VPS僅5元/月

用HBuilder打包簡單項目（vue項目）APP的步驟

使用vue完成微信公眾號網(wǎng)頁小記

Flutter樣式和布局控件簡析(二)

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

Hello, World!

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！