正文 

当前位置： 首页 > java > java教程

react+webpack+es6环境搭建(自定义框架)

JaminHuang JaminHuang     2022-08-05     672

关键词：

引言

　　目前React前端框架是今年最火的。而基于React的React Native也迅速发展。React有其独特的组件化功能与JSX的新语法，帮助前端设计有了更好的设计与便捷，而React Native更是扩大了前端的边界。

　　说道React，那就不得不说一下Webpack凭借它异步加载和可分离打包等优秀的特性，走在取代Grunt和Gulp的路上。而面向未来的ES6，更是支持模块化处理。

　　下面我就分享一下关于Webpack+React+ES6的环境搭建（通用）【附加发布版】

准备工作

　　首先需要准备的就是WebStorm以及安装node.js，这里我给出自己云盘上的下载地址，亲测可用。对应的地址如下：

　　WebStorm：链接：http://pan.baidu.com/s/1o787Av4 密码：z176

　　node.js：链接：https://nodejs.org/en/ 官网

让我们跑起来

　　1、新建项目EChartDemo（我这里后续会使用一些相关的百度绘画组件，故以此命名，但这里只做框架构建，暂不引入百度绘画组件），更改文件-->设置  ES6环境，如图所示：

技术分享

　　2、添加package.json文件，输入npm init文件自动生成文件，如下：

技术分享 
{
  "name": "react-echart",
  "version": "1.0.0",
  "scripts": {
    "start": "node server.js"
  },
  "description": "React+EChart百度绘图组件Demo",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/JaminHuang/EChartDemo.git"
  },
  "author": "JaminHuang",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/JaminHuang/EChartDemo/issues"
  },
  "homepage": "https://github.com/JaminHuang/EChartDemo#readme"
}
View Code

　　3、生成文件后，添加server.js（服务入口文件）、webpack.config.js（配置文件）、webpack.production.config.js（发布版配置文件），再进行修改对应的Scripts，用于修改启动和发布。

"scripts": {
    "start": "node server.js",
    "prod": "webpack --config webpack.production.config.js"
  }

　　4、新建入口文件index.html，以及相关代码框架，如下所示

技术分享 
　　|--src
　　|----containers
　　|------index.js　　组件处理主文件
　　|------root.js　　  地址跳转配置文件
　　|----service
　　|------index.js　　服务请求主文件　
　　|------request.js　服务请求文件
　　|----index.js　　  主入口文件
　　|--index.html　　页面入口文件
　　|--package.json　项目信息与安装配置文件
　　|--server.js　　　 服务端口入口文件
　　|--webpack.config.js　　配置文件
　　|--webpack.production.config.js　　（发布版）配置文件
View Code

　　5、需要安装的包，详情请看package.json，如下：

技术分享 
"dependencies": {
    "echarts": "^3.2.3",
    "isomorphic-fetch": "^2.2.1",
    "lodash": "^4.15.0",
    "react": "^15.3.1",
    "react-dom": "^15.3.1",
    "react-router": "^2.8.0"
  },
  "devDependencies": {
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-polyfill": "^6.13.0",
    "babel-preset-latest": "^6.14.0",
    "babel-preset-react": "^6.11.1",
    "open": "0.0.5",
    "react-hot-loader": "^1.3.0",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.15.1"
  }
View Code

　　6、新建.babelrc(babel配置文件)，重要

{
  "presets":["react","latest"]
}

具体内容的添加配置

　　1、index.html配置

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="wrapper"></div>
<script src="./public/bundle.js" type="text/javascript"></script>
</body>
</html>
View Code

　　2、server.js配置

技术分享 
‘use strict‘;
var open = require(‘open‘);
var webpack =require(‘webpack‘);
var WebpackDevServer = require(‘webpack-dev-server‘);
var config = require(‘./webpack.config.js‘);

var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {
    publicPath:config.output.publicPath,
    hot:true,
    historyApiFallback: true,
    quiet: false,
    noInfo: false,
    filename: "index.js",
    watchOptions: {
        aggregateTimeout: 300,
        poll: 1000
    },
    headers: {"X-Custom-Header": "yes"},
    stats: {colors: true}
});

server.listen(3010, function (err, result) {
    if (err)console.log(err);
    open(‘http://localhost:3010‘);
});
View Code

　　3、webpack.config.js配置

技术分享 
‘use strict‘;
var path = require(‘path‘);
var webpack = require(‘webpack‘);

var config = {
    devtool: ‘source-map‘,
    entry: {
        app: [‘webpack-dev-server/client?http://localhost:3010‘, ‘webpack/hot/dev-server‘, ‘./src/index‘]
    },
    output: {
        path: path.join(__dirname, ‘public‘),
        publicPath: ‘/public/‘,
        //chunkFilename: ‘[id].chunk.js‘,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {test: /.js$/, loaders: [‘react-hot‘, ‘babel‘], include: [path.join(__dirname, ‘src‘)]}
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        //new webpack.optimize.CommonsChunkPlugin(‘shared.js‘),
        new webpack.DefinePlugin({
            ‘process.env‘: {
                ‘DEBUG‘: true
            }
        })
    ]
};
module.exports = config;
View Code

　　4、webpack.production.config.js配置

技术分享 
/**
 * 创建时间：2016年9月19日 10:45:57
 * 创建人：JaminHuang
 * 描述：配置文件（发布版）
 */
‘use strict‘;
var path = require(‘path‘);
var webpack = require(‘webpack‘);

module.exports = {
    devtool: false,
    debug: false,
    stats: {
        colors: true,
        reasons: false
    },
    entry: ‘./src/index‘,
    output: {
        path: path.join(__dirname, ‘public‘),
        publicPath: ‘/public/‘,
        //chunkFilename: ‘[id].chunk.js‘,
        filename: ‘bundle.js‘
    },
    plugins: [
        new webpack.optimize.DedupePlugin(),
        new webpack.DefinePlugin({
            ‘process.env‘: {
                ‘NODE_ENV‘: JSON.stringify(‘production‘),
                ‘DEBUG‘: false
            }
        }),
        //new webpack.optimize.CommonsChunkPlugin(‘shared.js‘),
        new webpack.optimize.UglifyJsPlugin({
            compressor: {
                warnings: false
            }
        }),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.AggressiveMergingPlugin(),
        new webpack.NoErrorsPlugin()
    ],
    module: {
        loaders: [
            {test: /.js$/, loader: "babel", exclude: /node_modules/}
        ]
    }
};
View Code

　　5、src文件下的主入口文件配置

技术分享 
‘use strict‘;
import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
import { browserHistory, Router } from ‘react-router‘
import routes from ‘./containers/root‘;
import ‘babel-polyfill‘;

ReactDOM.render(<Router history={browserHistory} routes={routes}/>, document.getElementById(‘wrapper‘));
View Code

　　6、service文件（请求服务，如果没有调用其他API接口则不用创建）下的相关配置

　　　　6.1　　index.js

‘use strict‘;
import * as Request from ‘./request‘;

export {
    Request
}

　　　　6.2　　request.js

‘use strict‘;
import fetch from ‘isomorphic-fetch‘;
const baseUrl = "http://xxx";

export function FetchPost(url, data) {
    return fetch(`${baseUrl}/${url}`, {
        headers: {"Content-Type": "application/json"},
        method: ‘POST‘,
        body: JSON.stringify(data)
    }).then(response=> {
        return response.json();
    })
}

　　7、containers文件（组件包）下的相关配置

　　　　7.1　　index.js

技术分享 
‘use strict‘;
import React,{ Component } from ‘react‘;

import { Link } from ‘react-router‘;

class Container extends Component {
    render() {
        const { children } = this.props;
        return (<div>{children}这里是首页</div>)
    }
}


export default Container;
View Code

　　　　7.2　　root.js

技术分享 
‘use strict‘;
import Index from ‘./‘;
export default {
    component: Index,
    path: ‘/‘
}
View Code

后记

　　至此，所有配置全部都已经完成了，如果想运行查看则只要输入”npm start“就可以调试查看啦~如果想发布则输入”npm prod“就行了。

　　附上Demo源代码地址：如果感觉可以的话，请给个Star哦~

　　地址：https://github.com/JaminHuang/EChartDemo

使用babel+react+webpack搭建web应用

话不说直接上正题。环境搭建Babel--目前浏览器对于ES6的语法解析支持度还不高，所以要通过转码在编译，所以在使用ES6之前要安装Babel，之前安装的时候遇到了一些问题但是没有全部记录下来，现在只能是尽力重现一下。　　Bab... 查看详情

利用yeoman快速搭建react+webpack+es6脚手架

...们就是想要去尝试新的框架。比如最近我就尝试着使用了webpack+react+es6的方式开发项目，感觉很不错，然后很多项目都用了这种方式。所以为了不需要每次开发的时候都从头开始新建文 查看详情

es6环境搭建(代码片段)

...以查看Node已经实现的ES6特性。node--v8-options|grepharmony webpackwebpack是一个现代JavaScript应用程序的静态模块打包器(modulebundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependencygraph)，其中包含应用程序需要的每... 查看详情

es6开发环境快速搭建(代码片段)

所需工具及说明webpack用于打包webpack-dev-server用于检测文件变化hjs-webpack简化webpack配置的工具安装工具命令npminstall-gwebpacknpminstall-gwebpack-dev-server创建项目目录mkdirproject&&cd$_npminit-ynpminstallhjs-webpack--save创建webpac 查看详情

我的react学习之行-01webpack与react环境搭建(代码片段)

前言预备自己使用webpack与react搭建前端与后端分离的博客系统,在这个git上记录我所有的步骤，以便自我学习与总结基础环境node/npmwebpack用于打包的工具，目前使用的是4.0npminstallwebpackwebpack-cli--save-dev这就是安装webpack,当然... 查看详情

es6开发环境快速搭建(代码片段)

所需工具及说明webpack用于打包webpack-dev-server用于检测文件变化hjs-webpack简化webpack配置的工具安装工具命令npminstall-gwebpacknpminstall-gwebpack-dev-server创建项目目录mkdirproject&&cd$_npminit-ynpminstallhjs-webpack--save创建webpack配置文件webpack... 查看详情

手动用webpack-chain搭建移动端react环境(代码片段)

项目介绍一个移动端web-app项目基于webpack-chain（vue2.0的打包工具）webpack-chain介绍一个可以链式调用的webpack配置webpack-config.js配置constmerge=require('webpack-merge')constcommon=require('./config/c 查看详情

手动用webpack-chain搭建移动端react环境(代码片段)

项目介绍一个移动端web-app项目基于webpack-chain（vue2.0的打包工具）webpack-chain介绍一个可以链式调用的webpack配置webpack-config.js配置constmerge=require('webpack-merge')constcommon=require('./config/com 查看详情

在 React 故事书自定义 webpack 配置中使用 webpack ProvidePlugin

】在React故事书自定义webpack配置中使用webpackProvidePlugin【英文标题】：usingwebpackProvidePlugininReactstorybookcustomwebpackconfig【发布时间】：2017-10-0513:44:51【问题描述】：我已经为React中的拖放构建了一个包装器包，并添加了storybook示例... 查看详情

使用react + webpack时如何使用绝对路径导入自定义scss？

】使用react+webpack时如何使用绝对路径导入自定义scss？【英文标题】：Howtouseabsolutepathtoimportcustomscss,whenusingreact+webpack?【发布时间】：2016-06-2612:52:21【问题描述】：在一个scss文件中，我正在尝试导入自定义的、广泛使用的scss块（... 查看详情

基于react+如何搭建一个完整的前端框架(代码片段)

...建React开发环境。　　create-react-app自动创建的项目是基于Webpack+ES6。　　执行以下命令创建项目：　　$cnpminstall-gcreate-react-app　　$create-react-ap 查看详情

webpack5搭建一个简易的react+ts开发环境

参考技术A之前入行前端系统学习过Webpack，那时候的版本是4，当时对Webpack的印象就是简单，但绝不易上手，尤其是应用到项目中，各种插件眼花缭乱，心都碎了一地。现在Webpack升级到5了，里面内置了很多的插件，但是也还是做... 查看详情

Web Workers 中的 importScripts 在 React/Webpack 环境中未定义

】WebWorkers中的importScripts在React/Webpack环境中未定义【英文标题】：importScriptsinWebWorkersisundefinedinsideaReact/Webpackenvironment【发布时间】：2018-05-1223:24:40【问题描述】：我正在开发一个使用create-react-app创建的React应用程序。我在其中... 查看详情

weboack的搭建(代码片段)

1.webpack是什么webpack是一个模块化构建打包工具vue,react用的脚手架底层都是基于webpack搭建的webpack在公司中主要用于公司内部搭建前端环境掌握node,webpack可以说是晋升架构师升的重要一环！如果你会了webpack,你在vue脚手架中也... 查看详情

react系列文章：npm手动搭建react运行实例(新手必看)

...act运行环境，总会遇到各种坑；本文，将用最短时间解决webpack+react环境搭建问题.1、如果你还没有React基础 看这里.2、如果不知道webpack是啥？请 看这里.3、如果你还没有装npm 看这里. 目 录一、webpack+react 运... 查看详情

如何使用 React + ES6 + webpack 导入和导出组件？

】如何使用React+ES6+webpack导入和导出组件？【英文标题】：HowtoimportandexportcomponentsusingReact+ES6+webpack?【发布时间】：2016-03-0114:03:53【问题描述】：我正在使用babel和webpack玩React和ES6。我想在不同的文件中构建几个组件，导入一个文... 查看详情

如何在windows下搭建react开发环境上，实现网站的react版本

...ct发环境何搭建nodereact发环境varpath=require("path");varwebpack=require('webpack');module.exports=entry:app:['./app/main.jsx'],output:path:path.resolve(__dirname,"./build"),publicPath:"",filename:"bundle.js",resolve:extensions:['&#... 查看详情

手动用webpack-chain搭建移动端react环境(代码片段)

项目介绍一个移动端web-app项目基于webpack-chain（vue2.0的打包工具）webpack-chain介绍一个可以链式调用的webpack配置webpack-config.js配置constmerge=require('webpack-merge')constcommon=require('./config/common.js')constdev=require(&... 查看详情