react實時熱更新開發環境搭建

princekin 發布于2019-08-29 12:32 / 3741人閱讀

摘要：搭建一個實時熱更新開發環境，當代碼變更時，可以不用重新啟動打包文件，這樣會很大地提高我們的開發效率。完成開發環境搭建。

搭建一個react實時熱更新開發環境，當代碼變更時，可以不用重新啟動webpack打包文件，這樣會很大地提高我們的開發效率。

使用工具

vscode編輯器，可以實時git推送更新自帶git命令行，隨意下載各種語言框架代碼格式化高亮插件

chrome ^58瀏覽器性能穩定，方便實時調試bug

node ^7 自帶npm包管理工具和js后臺運行環境

git bash 命令行工具，方便命令行命令輸入

搭建開發環境

1.創建文件夾，初始化npm配置文件
$ mkdir react-1 && cd react-1 && npm init
2.安裝react react-dom react-router react-router-dom必備的核心模塊
$ npm i --save react react-dom react-router react-router-dom
3.全局安裝webpack webpack-dev-server
用于打包文件和建立一個實時更新的服務器系統,并且可以使用webpack命令行
$ npm i -g webpack webpack-dev-server
4.項目文件夾下面安裝webpack webpack-dev-server babel-loader babel-core babel-preset-es2015 babel-preset-react等開發用模塊，babel有關的用來轉碼es6 和jsx語法

$ npm install --save-dev  webpack webpack-dev-server babel-loader babel-core babel-preset-es2015 babel-preset-react

5.配置webpack.congfig.js文件指定好加載器和入口文件路徑打包后的文件路徑文件名。

//webpack.config.js
var webpack = require("webpack")
var path = require("path")
module.exports = {
    context: __dirname + "/src",
    entry: "./js/index.js",
    devServer: {
        inline: true
    },
    module: {
        loaders: [{
            test: /.jsx?$/,
            exclude: /(node_modules)/,
            loader: "babel-loader",
            query: {
                presets: ["react", "es2015"]
            }
        }]
    },
    output: {
        path: __dirname + "/output/",
        filename: "bundle.js"
    }
}

文件目錄如下
注意此時打包后bundle.js文件存在于內存中所以在index.html中只能用src="./bundle.js"引用.不能加上相對路徑文件夾output/!

這樣我們在命令行輸入webpack-dev-server 打開瀏覽器輸入生成的網址，就會自動在更改代碼后，實時刷新瀏覽器。完成react開發環境搭建。其他的自動打開瀏覽器，分割代碼等功能，可以參考webpack官網指南。

云服務器 GPU云服務器全面評估音視頻實時通信的開發測試環境開發環境搭建搭建開發環境熱更新

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

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

react實時熱更新開發環境搭建

摘要：搭建一個實時熱更新開發環境，當代碼變更時，可以不用重新啟動打包文件，這樣會很大地提高我們的開發效率。完成開發環境搭建。搭建一個react實時熱更新開發環境，當代碼變更時，可以不用重新啟動webpack打包文件，這樣會很大地提高我們的開發效率。使用工具 vscode編輯器，可以實時git推送更新自帶git命令行，隨意下載各種語言框架代碼格式化高亮插件 chrome ^58瀏覽器性能...

Vultr 2019-08-20 16:22 評論0 收藏0
使用webpack搭建react開發環境

摘要：安裝和使用初始化項目安裝是的簡寫，是指安裝模塊并保存到的中，主要在開發環境中的依賴包如果使用版本，還需要安裝。新建一下項目結構使用非全局安裝下的打包。安裝和使用webpack 1.初始化項目 mkdir react-redux && cd react-redux npm init -y 2.安裝webpack npm i webpack -D npm i -D 是 npm insta...

Tonny 2019-08-22 17:08 評論0 收藏0
使用webpack搭建react開發環境

摘要：安裝和使用初始化項目安裝是的簡寫，是指安裝模塊并保存到的中，主要在開發環境中的依賴包如果使用版本，還需要安裝。新建一下項目結構使用非全局安裝下的打包。安裝和使用webpack 1.初始化項目 mkdir react-redux && cd react-redux npm init -y 2.安裝webpack npm i webpack -D npm i -D 是 npm insta...

wanglu1209 2019-08-29 15:22 評論0 收藏0
使用webpack搭建react開發環境

摘要：安裝和使用初始化項目安裝是的簡寫，是指安裝模塊并保存到的中，主要在開發環境中的依賴包如果使用版本，還需要安裝。新建一下項目結構使用非全局安裝下的打包。安裝和使用webpack 1.初始化項目 mkdir react-redux && cd react-redux npm init -y 2.安裝webpack npm i webpack -D npm i -D 是 npm insta...

Freeman 2019-08-02 10:25 評論0 收藏0