構建React開發環境

時間 2019-11-21

標籤構建 react 開發環境欄目 React 简体版

原文原文鏈接

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

因爲一些軟件安裝跟系統環境相關，故這裏查看本文檔，須要根據本身的系統環境，選擇相對應的系統版本。javascript

本文運行環境css

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

Yarn前端

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

Yarn 經過一組豐富的命令執行包的安裝、管理、發佈等操做。node

Yarn 與 Npm的許多功能是相同的，包的元數據格式也是同樣的，所以能夠無痛遷移到 Yarn。react

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

MacOS系統安裝Yarnweb

brew install yarn

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

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 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

// 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(
    <h1>Hello, World!</h1>,
    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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>

再次運行webpack打包