react实时热更新开发环境搭建

Vultr 发布于2019-08-20 16:22 / 2483人阅读

摘要：搭建一个实时热更新开发环境，当代码变更时，可以不用重新启动打包文件，这样会很大地提高我们的开发效率。完成开发环境搭建。

搭建一个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云服务器全面评估音视频实时通信的开发测试环境开发环境搭建搭建开发环境热更新

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82894.html

react实时热更新开发环境搭建

摘要：搭建一个实时热更新开发环境，当代码变更时，可以不用重新启动打包文件，这样会很大地提高我们的开发效率。完成开发环境搭建。搭建一个react实时热更新开发环境，当代码变更时，可以不用重新启动webpack打包文件，这样会很大地提高我们的开发效率。使用工具 vscode编辑器，可以实时git推送更新自带git命令行，随意下载各种语言框架代码格式化高亮插件 chrome ^58浏览器性能...

princekin 2019-08-29 12:32 评论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