構建React開發環境

yck 發布于2019-08-26 10:15 / 2477人閱讀

摘要：使用包管理工具，基于構建工具，搭建開發環境由于一些軟件安裝跟系統環境相關，故這里查看本文檔，需要根據自己的系統環境，選擇相對應的系統版本。

使用Yarn包管理工具，基于Webpack構建工具，搭建React開發環境

由于一些軟件安裝跟系統環境相關，故這里查看本文檔，需要根據自己的系統環境，選擇相對應的系統版本。

本文運行環境

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

Yarn

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

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

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

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

MacOS系統安裝Yarn

brew install yarn

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

yarn init

React

react用于構建用戶界面的 JavaScript 庫

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

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

yarn add react react-dom

安裝項目開發依賴 webpack 和 webpack-cli 包

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

配置webpack編譯項目

創建項目目錄

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目錄中會出現兩個文件app.js和index.html

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

上面如果不出錯的情況下，我們開發配置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目錄下的文件，進行測試

ok，在這里基本就已經完成開發環境的搭建

優化

我們發現打包后的app.js文件太大，app.js將react和react-dom源碼也打包進了app.js文件，我們需要將其摘出來，react和react-dom可以使用官網上給出的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運行測試

總結

前端工具繁多，千變萬化，不同的版本，可能相關配置都不一樣，所以我們要學會看相關官方文檔，一切以官方文檔為準則，適當的囫圇吞棗，不用知其意，直接copy文檔上的相關配置，而將有限的精力放入項目業務本身。

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

云服務器 GPU云服務器 docker構建環境 java環境構建 react開發神器 docker react 開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105862.html

webpack工程化集成React技術棧（一）

項目開始前，我們先聊一聊關于項目的一些說明。該項目起始于2017年初，當時公司主要技術棧為gulp+angular，鑒于react的火熱的生態，在公司決定研發bss管理系統時選用react開發，目的也是為react native打下基礎，以解決后期公司大前端技術棧的逐步成熟。（當時沒有選擇vue開發的主要原因是weex生態還不夠特別成熟），既然決定換新，項目的構建也跟著一起換，從gulp轉向火熱的...

tianhang 2019-08-22 14:47 評論0 收藏0
React文檔翻譯系列（一）安裝

摘要：文檔翻譯系列一安裝原文地址原文本系列是針對文檔進行的翻譯，因為自己在學習的時候，最開始通過看博客或者論壇等中文資料，有些內容是零零散散的接收，并沒有給自己帶來很好的效果，所以后來決定把文檔的原文從頭到尾看一遍。 React文檔翻譯系列（一）安裝原文地址：原文本系列是針對React文檔進行的翻譯，因為自己在學習react的時候，最開始通過看博客或者論壇等中文資料，有些內容是零零散散的...

Fourierr 2019-08-20 15:28 評論0 收藏0
企業級React項目的個人構建總結

摘要：隔壁老王今日行程不同的內容使用這種方法就可以將我們得所有路由寫在一起了，可能有人覺得每次都要寫引入很麻煩，有沒有其他更好用的辦法，在講的時候會說到這里就先跳過。前言距離上篇文章已經好長一段時間了，這兩個星期公司派駐到京東方這邊出差負責入駐項目團隊的前端工作。這段時間從零搭建一下前端項目，這次給的時間比較充裕，思考的也比較多。以前也常有搭過前端項目，但是給的時間都比較緊，因此很多問題...

simpleapples 2019-08-26 12:14 評論0 收藏0
構建前端項目

摘要：解決思路服務器端渲染服務器端和前端公用同一個應用，然后通過構建工具及配置，確定哪些組件需要再服務器端渲染，那些組件需要再客戶端渲染。服務器端渲染，由框架與構建工具配合，并依據一定的項目結構和編碼方式，共同運行。分離為什么需要前后端分離、web服務器與static服務器分離: 前端與后端耦合 (需求) 自動化、工程化的構建前端的代碼 (基礎條件) 模塊化、組件化，項目共享代碼 (...

mindwind 2019-08-23 13:51 評論0 收藏0
webpack優化

摘要：使用要給項目構建接入動態鏈接庫的思想，需要完成以下事情把網頁依賴的基礎模塊抽離出來，打包到一個個單獨的動態鏈接庫中去。接入已經內置了對動態鏈接庫的支持，需要通過個內置的插件接入，它們分別是插件用于打包出一個個單獨的動態鏈接庫文件。 webpack優化查看所有文檔頁面：全棧開發，獲取更多信息。原文鏈接：webpack優化，原文廣告模態框遮擋，閱讀體驗不好，所以整理成本文，方便查找。 ...

ChanceWong 2019-08-22 17:34 評論0 收藏0