react+redux框架配置从无到有直到正常运行全流程（上）

写于：2017-1-18

完整干净demo地址：coding.net/u/java_luo/p/react_luo/git

技术栈：
react，redux，webpack，eslint，babel，antd(蚂蚁金服ui)

1、前期准备

①、windows系统，本框架是在windows系统下配置的
②、SublimeText，用的这个编辑器
②、安装node.js
③、创建一个文件夹，用node命令行工具进入该文件夹，运行npm init命令生成一个初始package.json

2、配置package.json

{
  "name": "myreact",// 项目名字
  "version": "1.0.0",// 项目版本
  "description": "...",// 项目简介
  "main": "index.js",// 项目入口js，用不到，写一个在这里当摆设
  "scripts": {
    "watch": "node server.js",// 开发模式运行此命令启动服务
    "build": "webpack -p --config webpack.production.config.js --progress --profile --colors" // 项目最终打包 运行此命令（webpack.production.config.js是后面要创建的webpack配置文件）
  },"author": "luo",// 项目作者
  "license": "ISC",// 项目开源许可证
  "private": true,// 项目是否私有

  // 项目最终需要依赖的插件
  "dependencies": {
    "antd": "^2.6.3",// 蚂蚁金服的ui库
    "babel-polyfill": "^6.20.0",// 用于解析ES6各种新功能（比如map,set,Generator等）
    "react": "^15.4.2",// react框架核心
    "react-dom": "^15.4.2",// react渲染组件时要用
    "react-redux": "^5.0.1",// react与redux连接的桥梁
    "react-router": "^3.0.0",// react路由器，做路由要用
    "react-router-redux": "^4.0.7",// react路由与redux连接的桥梁
    "redux": "^3.6.0",// redux核心
    "redux-thunk": "^2.1.0",// redux中间件，用于处理异步action
    "reqwest": "^2.0.5" // 一个工具插件，封装了fetch，异步请求时有用
  },// 开发模式下需要依赖的插件
  "devDependencies": {
    "babel-core": "^6.21.0",// babel核心
    "babel-loader": "^6.2.10",// webpack解析器：用于打包时解析ES6
    "babel-plugin-import": "^1.1.0",// 按需加载，用于蚂蚁金服ui库，用了哪些ui组件，就编译哪些组件
    "babel-preset-es2015": "^6.18.0",// babel插件：解析ES6语法
    "babel-preset-react": "^6.16.0",// babel插件：解析react语法（JSX）
    "babel-preset-stage-3": "^6.17.0",// babel插件：解析js目前最新版本的一些语法
    "css-loader": "^0.26.1",// webpack解析器：打包时处理css,less,sass这类文件中的url路径问题，比如background-image的路径,会自动匹配项目的根路径
    "eslint": "^3.13.1",// 一个语法检查器，在开发的时候常用来规范代码风格和排错
    "eslint-loader": "^1.6.1",// webpack解析器：把eslint加到webpack中使用，所以需要这个
    "eslint-plugin-react": "^6.9.0",// eslint插件：支持检查react的语法
    "extract-text-webpack-plugin": "^1.0.1",// 项目最终打包时，单独把所有样式文件打包成一个css文件，需要这个
    "file-loader": "^0.9.0",// webpack解析器：打包时解析各种非图片类文件和gif文件
    "html-webpack-plugin": "^2.26.0",// webpack插件：打包时自动生成一个index.html
    "less": "^2.7.2",// less核心
    "less-loader": "^2.2.3",// webpack解析器：打包时解析less
    "style-loader": "^0.13.1",// webpack解析器：打包时将样式文件添加进页面中，自动生成<style>标签
    "url-loader": "^0.5.7",// webpack解析器：处理图片或其他文件，会把小图片编译为base64编码
    "webpack": "^1.14.0",// webpack模块化打包工具
    "webpack-dev-server": "^1.16.2" // 一个和webpack配合使用的服务器工具，打包完成后启动一个服务，让开发人员方便测试，相当于tomcat
  }
}

3、然后创建一下项目的基本目录结构

图中有两个东西不是直接使用的，而是要加载到webpack中，让webpack打包的时候自动调用：

①、.babelrc，即babel功能是要让webpack去调用
②、.eslintrc.json,即语法检测是在打包时自动去检测

4、配置babel

babel 用于解析ES6，jsx等新语法，让现代浏览器可以运行。
创建.babelrc文件（名为.babelrc,无后缀）

{
  // 运用babel的3个插件，es2015,stage-3,react （即npm install时的那3个插件）
  "presets": ["es2015","stage-3",'react'],// 下面是配置按需加载那个插件的（babel-plugin-import）
  // 是从蚂蚁金服抄的，大致意思就是，css、less等样式文件需要按需加载
  // js也要按需加载
  "plugins": [["import",[
    {
        "libraryName": "antd","libraryDirectory": "lib","style": true
    },{
        "libraryName": "antd-mobile","libraryDirectory": "component",},]]]
}

5、配置eslint

{
    // 项目的环境
    // 意思就是以下配置的这些环境，它们自身的全局变量,eslint认为是存在的，比如jquery的$,如果下面不配置jquery:true,项目中直接使用$,eslint会认为$未定义
    "env": {
        "browser": true,// 浏览器环境，window变量等
        "commonjs": true,// commonjs环境，require方法等
        "es6": true,// es6环境，各种es6新功能
        "jquery": true // jquery,就是$符号
    },// 继承某个官方定义好的检查规则
    // 下面用的是react的规则，必须配这个，否则eslint识别不了react
    "extends": "plugin:react/recommended",// 设置各种解析器
    "parserOptions": {
        "ecmaVersion": 8,// js版本，最新的8（即JS2017）
        "ecmaFeatures": { // 额外的语言特性
            "impliedStrict": true,// 全局启用严格模式
            "experimentalObjectRestSpread": true,// 支持...余运算符，就是ES6里面那个“...”解构赋值
            "jsx": true // jsx语法
        },"sourceType": "module" // 代码类型：模块化。因为我们经常用import,export等
    },// 第3方插件
    "plugins": [
        "react" // 支持react(即eslint-plugin-react)，上面配置了jsx,但react语法不仅仅是jsx，所以需要这个
    ],// 自定义的检查规则
    "rules": {
        // 字符串的引号必须用单引号
        "quotes": [
            "error","single"
        ],// 每一句代码结束必须加分号
        "semi": [
            "error","always"
        ],"no-cond-assign": "error",// 禁止条件表达式中出现赋值操作符
        "no-debugger": "error",// 不允许代码中出现debugger
        "no-dupe-args": "error",// function禁止重名参数
        "no-caller": "error",// 禁用 arguments.caller 或 arguments.callee
        "no-invalid-this": "error",// 禁止全局this
        "no-unmodified-loop-condition": "error",// 禁止死循环
        "no-with": "error",// 禁止使用with语句
        "no-catch-shadow": "error" // 禁止 catch 子句的参数与外层作用域中的变量同名
    }
}

eslit的具体使用和配置可以参考此网站：Eslint中文站

6、配置webpack

webpack用于项目打包，把众多的js,css等文件压缩，混淆加密，最终只生成几个合并后的文件

开发环境和生产环境的配置有所不同，下面先配置开发环境：

webpack.dev.config.js

var path = require('path'); // 用于获取根路径
var webpack = require('webpack'); // webpack核心

var ROOT_PATH = path.resolve(__dirname); // 项目根路径
var APP_PATH = path.resolve(ROOT_PATH,'src'); // 项目的src目录路径
var APP_FILE = path.resolve(APP_PATH,'app'); // 项目的入口文件（即src/app.js）
var BUILD_PATH = path.resolve(ROOT_PATH,'/build'); //规定打包好的文件存放到此目录下(开发模式中，我们一般配置为最终生成1个bundle.js)

module.exports = {
    /* 需要被打包的文件在此配置 */
    entry: {
        app: [
            'webpack-dev-server/client?http://localhost:8888',// 热更新监听此地址（端口号与server.js中配置的要一致，我们稍后来写server.js）
            'webpack/hot/only-dev-server',// 启用热更新
            APP_FILE    // 入口文件
        ]
    },/* 打包后要输出的文件在此配置 */
    output: {
        publicPath: '/test/',// 这是在启动webpack-dev-server时，bundle.js的引用路径应该相对于此路径，即在index.html中： 
        // <script src="/test/bundle.js"></script>
        // 而且所有的URL地址，比如css中的背景图片，html中的img的src都会自动变成：/test/*****
        path: BUILD_PATH,// 将打包好的文件放在此路径下，开发模式中只会在内存中存在，不会在此路径生成真正的文件
        filename: 'bundle.js',//最终生成的文件名字
    },devtool: 'source-map',// 打包后，代码都被压缩了，如果报错看不出是在哪一行报的错，配置这个就是为了解决这个问题
    /* 下面是配置一些解析器 */
    module: {
        /* 在打包之前运行 */
        preLoaders: [
          {
            test: /\.js?$/,// 解析.js,.jsx
            loader: 'eslint',// 解析器是eslint,即进行语法检查，不过关的话会报错
            exclude: /node_modules/,// 不检查node_modules目录下的内容
          },],/* 打包时需要用到的解析器 */
        loaders: [
            // 解析.js,.jsx,用babel解析器，webpack会自动加载我们配置的.babelrc文件
            {
                test: /\.js$/,exclude: /node_modules/,loader: 'babel',// 解析.css,先执行css-loader,再执行style-loader
            // 注意：连node_modules中的也一并解析
            {
                test: /\.css$/,loaders: ['style','css'],// 解析.less,再执行style-loader
            // 注意：连node_modules中的也一并解析(因为蚂蚁金服ui框架的样式文件就存在此目录下)
            // 如果没有用到less，就不用配（如果不配，蚂蚁金服ui框架的样式文件就要使用antd.css,而不要使用antd.less）
            {
                test: /\.less$/,'css','less'],// 其他各类文件处理，打包后会把这些文件挪到打包好的文件夹中
            {
                test: /\.(eot|woff|svg|ttf|woff2|gif|appcache|mp3)(\?|$)/,loader: 'file-loader?name=[name].[ext]',// 处理图片，这里配置的是，小于8192字节的图片变成base64编码，其余图片最终会生成一个images文件夹，存放其中
            {
                test: /\.(png|jpg|gif)$/,loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]',}
        ]
    },/* 配置一些额外的webpack插件 */
    plugins: [
        new webpack.HotModuleReplacementPlugin(),// 热更新插件
        new webpack.NoErrorsPlugin()    // 即使有错误也不中断运行
    ],/* 配置额外的自定义方案 */
    resolve: {
        extensions: ['','.js','.jsx','.less','.css'],//在webpack打包时，自动匹配这些后缀名的文件
    }
};

开发模式下：
①、所有的样式文件会以内嵌方式全部加到index.html的head中。
②、会生成一个仅存在于内存中的bunde.js文件

7、写server.js

第6步配置了webpack.dev.config.js,打包后，需要运行这个项目，
所以写一个server.js：

var webpack = require('webpack'); // webpack核心
var WebpackDevServer = require('webpack-dev-server'); // webpack提供的服务器插件
var config = require('./webpack.dev.config.js'); // webpack的配置文件

/* 下面是创建一个服务对象，固定写法 */
var server = new WebpackDevServer(webpack(config),{
    publicPath: config.output.publicPath,// 文件相对引用路径，就用配置文件中配置的
    hot: true,// 是否启用热更新
    inline: true,// 是否实时刷新，即代码有更改，自动刷新浏览器
    historyApiFallback: true,// 所有的url路径均跳转到index.html,需要设置为true，否则比如访问localhost:8888,就跳转不到/home页
    progress: true,// 在控制台输出webpack的编译进度
    stats: { colors: true },// 不同类型的信息用不同的颜色显示
});

/* 将所有的访问路径，都返回index.html */
server.app.get('*',function(req,res) {
    res.sendFile(__dirname + '/src/index.html')
});
/* 启动服务 */
server.listen(8888,function() {
    console.log('启动服务：8888端口')
});

启动服务的命令在package.json中已经配好：
运行 npm run watch 即可

现在启动服务，将什么也没有，因为src/app.js和src/index.html是空的
这个之后再配置，下面来看一下配置最终打包所需的webpack配置文件

8、配置webpack.production.config.js

即最终用于生产环境的正式打包所需配置

webpack.production.config.js:

var path = require('path'); // 为了得到项目根路径
var webpack = require('webpack'); // webpack核心
var ExtractTextPlugin = require('extract-text-webpack-plugin'); // 为了单独打包css
var HtmlWebpackPlugin = require('html-webpack-plugin'); //根据模板生成最终html文件

var ROOT_PATH = path.resolve(__dirname); // 项目根路径
var APP_PATH = path.resolve(ROOT_PATH,'src'); // 项目src目录
var APP_FILE = path.resolve(APP_PATH,'app'); //项目入口文件（即src/app.js)
var BUILD_PATH = path.resolve(ROOT_PATH,'build/dist'); //打包后文件所存放的目录（一般就这么命名）

module.exports = {
    entry: {
        app: APP_FILE,// 需要被打包的文件，就这个入口文件
    },output: {
        path: BUILD_PATH,// 将文件打包到此目录下
        publicPath: '/',// 在生成的html中，文件的引入路径会相对于此地址，生成的css中，以及各类图片的URL都会相对于此地址
        // 因为打包后的所有文件，是要交给后台程序员，然后跟后台程序一起，组装成一个完整的项目，上线后，肯定有一个网址来访问，比如: www.test.com; 
        // 那么前端代码中所有的URL地址，都是相对于这个网址而言的，所以这里配置publicPath为‘/’,比如首页的路径就是www.test.com/home,图片test.jpg的访问路径就是www.test.com/images/test.jpg
        // 最关键的是路由跳转，我们之后要配置react路由，比如这里配置的publicPath是‘/’,那路由中route访问主页，就应该配置为：
        // <Route path="/home" component={homeContainer} />
        // 又比如publicPath配置的是'/xxx',route就应该是：
        // <Route path="/xxx/home" component={homeContainer} />
        // 一般就配置为'/',因为一个项目上线后就会有一个顶级域名指向它，但我们自己测试的时候，比如你最终打包了，然后把代码放到tomcat中运行，tomcat访问肯定就是:http://localhost:8888/myreact,这不是顶级域名，你就应该配置publicPath为‘/myreact’,路由中也相应配置为/myreact/home
        filename: '[name].js',// 最终生成的文件名字，项目中为app.js,最终也会叫app.js
        chunkFilename: '[name].chunk.js',// 这是配置一些非入口文件生成的最终文件名字，比如你用了代码分割，按需加载，把你的项目中某些文件单独打包了，就会用到这个。我们这里只有一个app.js,所以这个暂时用不上
    },/* 各种解析器 */
    module: {
        loaders: [
            // 解析.js,.jsx
            {
                test: /\.js$/,注意这里要用这个插件作为loader,最后才能生成单独的css文件
            {
                test: /\.css$/,loader: ExtractTextPlugin.extract('style',['css']),// 用这种方式写的，表示此类文件单独打包成一个css文件
            },// 解析less,原理同上
            {
                test: /\.less$/,['css','less']),// 解析各种非图片文件
            {
                test: /\.(eot|woff|svg|ttf|woff2|gif|appcache|mp3)(\?|$)/,// 解析图片，小于8kb的转换成base64
            // 注意配种中的name,就是生成到了images文件夹下
            {
                test: /\.(png|jpg|gif)$/,/* 额外的插件 */
    plugins: [
        new webpack.DefinePlugin({ // 一定要配置这个，这个是为了告诉webpack，当前用什么模式打包代码，production生产模式，dev开发模式
            'process.env': {
                NODE_ENV: JSON.stringify('production') //定义生产环境
            }
        }),// 此插件详细教程 http://www.cnblogs.com/haogj/p/5160821.html
        new HtmlWebpackPlugin({  //根据模板插入css/js等生成最终HTML
            filename: '../index.html',//生成的html存放路径，相对于（注意前面配置的BUILD_PATH是“build/dist”,即index.html会生成到build下，其他文件会打包到build/dist下）
            template: './src/index_template.html',//html模板路径
            inject: true,// 是否将js放在body的末尾
            hash: false,// 是否为本页面所有资源文件添加一个独特的hash值
        }),// 配置了这个插件，再配合上面loader中的配置，将所有样式文件打包为一个单独的css文件
        new ExtractTextPlugin('[name].css'),// 提取那些公共的模块、代码打包为一个单独的js文件
        // 下面这个方法第3个参数是自动去匹配，webpack遍历所有资源，发现是模块的，而且这个模块不是在src目录中的，就提取到公共js中
        // 即把所有node_modules中用到的包都单独打包到一个js中，如果有css,还会单独生成一个vendors.css文件
        new webpack.optimize.CommonsChunkPlugin('vendors','vendors.js',(module,count) =>
      module.resource && module.resource.indexOf(APP_PATH) === -1),// Uglify 加密压缩源代码
        new webpack.optimize.UglifyJsPlugin({
            output: {
                comments: false,// 删除代码中所有注释
            },compress: {
                warnings: false,// 估计是不输出警告信息之类的
            },}),// 配置额外的解决方案
    resolve: {
        extensions: ['',//后缀名自动补全
    }
};

9、写index.html 和 index_template.html模板

index.html:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <Meta charset="UTF-8" />
  <Meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <Meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
  <title>项目名字</title>
</head>
<body>
  <div id="app-root"></div>
  <script src="/test/bundle.js"></script>
</body>
</html>

上面的代码中，因为在webpack.dev.config.js中配置的output.publicPath是‘/test/’,
所以html中的script标签也相应的是/test/bundle.js

上面的这个index.html只是用于开发时，启动服务，然后就会跳转到这个html

index_template.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <Meta charset="UTF-8" />
  <Meta http-equiv="X-UA-Compatible" content="IE=edge,maximum-scale=1.0" />
  <title>项目名称</title>
</head>
<body>
  <div id="app-root"></div>
</body>
</html>

这个模版html是用于真正打包时，生成最终的index.html，可以交给后台人员直接使用的。js和css,webpack会自动加到最终的index.html中

到此为止，已经配置了可以正常运行的基本雏形，下一篇将在这个基本框架中，加入react,redux,以及基本业务逻辑

后半段：react+redux框架配置从无到有直到正常运行全流程（下）

原文链接：https://www.f2er.com/react/304978.html