配置 React 开发环境(Babel + Webpack)
1.概述
现代的前端开发已经不是以前那种引入几个库、写几行js代码、刷新一下页面就可以看效果的方式了。为了更新一下个人的技术栈，学习一下前端界大热门的 React 替换以前的jQuery、AngularJS(1.x)以更现代的方式完成工作。断断续续的研究了一阵子nodejs、react、redux、sass、babel、webpack、gulp等相关内容，总算有点入门了的感觉，这里记录一下搭建 React 开发环境的基本步骤以备忘。
[系统]
Windows 10 Pro(1709)、Chrome(62.0.3202.62)
[版本]
node(v8.7.0)、npm(v5.4.2)、babel(v6.26.0)、webpack(v3.8.1)、react(v16.0.0)、redux(v3.7.2)
1) 工具用途
Babel
转换 ES6 代码和 JSX语法
Webpack
JS模块化加载、前端资源打包
2) 项目结构
# 初始化node项目
npm init -y
# 安装 React 全家桶
npm install --save react react-dom prop-types redux react-redux react-router-dom
约定的目录如下
/
├──dist(此目录存放编译打包后的文件)
├──src(此目录存放项目的源码、资源)
│ ├──css(此目录存放.css/.scss类型的样式文件)
│ │ ├──common.scss(通用的css样式)
│ │ └──module1.scss(模块特定的css样式)
│ ├──fonts(此目录存放字体文件)
│ ├──images(此目录存放.png/.jpg/.gif/.svg等类型的图片文件)
│ ├──js(此目录存放.png/.jpg/.gif/.svg等类型的图片文件)
│ │ ├──module1.js(演示模块)
│ │ └──app.js(入口程序)
│ └──index.html
├──.babelrc(Babel配置文件)
├──package-lock.json
├──package.json
├──webpack.common.js(Webpack通用配置)
├──webpack.dev.js(Webpack开发模式配置)
└──webpack.prod.js(Webpack产品模式配置)
JS源码和资源按照功能模块划分目录应该更为合理，请按实际需求制定目录划分方案
2.Babel
1) 安装
必备：
npm install --save-dev babel-core babel-preset-env babel-preset-react
可选插件(用于特定的ES6语法支持)：
# https://babeljs.io/docs/plugins/transform-object-rest-spread/
npm install --save-dev babel-plugin-transform-object-rest-spread
# https://babeljs.io/docs/plugins/transform-class-properties/
npm install --save-dev babel-plugin-transform-class-properties
更多插件
https://babeljs.io/docs/plugins/#transform-plugins-experimental
2) 配置(.babelrc)
{
"presets": [
[
"env",
{
"useBuiltIns": true,
"targets": {
"browsers": [
"last 2 versions"
]
}
}
],
"react"
],
"plugins": [
"transform-object-rest-spread",
"transform-class-properties"
]
}
3.Webpack
1) 安装
# webpack、开发服务器、配置文件合并工具
npm install --save-dev webpack webpack-dev-server webpack-merge
# 各种模块处理器
npm install --save-dev babel-loader
npm install --save-dev style-loader css-loader file-loader
npm install --save-dev node-sass sass-loader
# JS 压缩插件、分离打包插件
npm install --save-dev uglifyjs-webpack-plugin extract-text-webpack-plugin
# 文件清理插件、Html生成插件
npm install --save-dev clean-webpack-plugin html-webpack-plugin
2) 基本配置
package.json
{
...,
"scripts": {
...,
"start": "webpack-dev-server --open --config webpack.dev.js",
"build": "webpack --config webpack.prod.js",
...
},
...
}
webpack.common.js
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
vendor: ['react', 'react-dom', 'redux', 'react-redux', 'react-router-dom'],
hello: './src/js/app.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].bundle.js'
},
module: {
rules: [{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
use: 'babel-loader'
}, {
test: /\.scss/,
exclude: path.resolve(__dirname, 'src/css/common.scss'),
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader?modules&minimize!sass-loader",
publicPath: '/'
})
}, {
test: /\.scss/,
include: path.resolve(__dirname, 'src/css/common.scss'),
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader?&minimize!sass-loader",
publicPath: '/'
})
}, {
test: /\.(png|svg|jpg|gif)$/,
use: {
loader: 'file-loader',
options: {
outputPath: 'images/'
}
}
}, {
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: {
loader: 'file-loader',
options: {
outputPath: 'fonts/'
}
}
}]
},
plugins: [
new ExtractTextPlugin({
filename: "css/style.css",
allChunks: true
}),
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
minChunks: Infinity
}),
new HtmlWebpackPlugin({
title: 'React App',
template: 'src/index.html'
})
]
};
webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
devtool: 'inline-source-map', // cheap-module-eval-source-map
devServer: {
contentBase: './dist'
}
});
webpack.prod.js
const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = merge(common, {
devtool: 'source-map',
output: {
//filename: '[name].[hash:8].min.js'
filename: 'js/[name].min.js'
},
plugins: [
new UglifyJSPlugin({
sourceMap: true
}),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new CleanWebpackPlugin(['dist'])
]
});
4.附加代码清单
src/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="root"></div>
</body>
</html>
src/js/app.js
import React from 'react'
import ReactDOM from 'react-dom'
import Module1 from './module1'
import '../css/common.scss'
ReactDOM.render(
<Module1 />,
document.getElementById('root'))
src/js/module1.js
import React from 'react'
import styles from '../css/module1.scss'
const Module1 = () => (
<h1 className={styles.css1}>Hello World</h1>
)
export default Module1;
src/css/common.scss
body {
background-color: yellowgreen;
}
src/css/module1.scss
.css1 {
color: red;
}
5.开发和编译
# 启动开发服务器并监视文件改动
npm start
# 编译产品化版本
npm run build
