react+webpack+babel+eslint+redux+react-router+sass 环境快速搭建

本文中的例子支持webpack-dev-server自动刷新及react热替换，使用了redux管理state，用react-router切换路由，用babel实现ES6语法书写，同时支持async/await书写，eslint代码检测，及sass的使用

1.搭建前文档结构：

assets 用来存放css 及图片等资源

components存放组件

js 用来存放js文件

页面主文件是 index.html

不用纠结文件夹结构，只要不涉及团队合作，这玩意儿就像自己的女人，想咋睡咋睡，想咋组织就咋组织大致如此

2.webpack配置文件的书写

var webpack=require('webpack');

var path=require('path');

var DashboardPlugin = require('webpack-dashboard/plugin');//一款很屌的插件，用了你就知道了

module.exports={

    entry:{ //多文件入口以及配置dev server及热替换

        app:[path.resolve(__dirname, './js/index.js'),'webpack/hot/dev-server.js','webpack-dev-server/client?http://0.0.0.0:8080'],

        vendor:['react']

    },

    output:{ //多文件输出 注意[name]这种写法

        publicPath:'/build',

        filename:'[name].js'

    },

    module:{

        loaders:[  //最新loader的写法

            {test:/\.js?$/,loaders:['babel','eslint'],exclude: /node_modules/},

            {test:/\.jsx?$/,loaders:['babel','eslint'],exclude: /node_modules/},

            {test: /\.(jpg|png|gif)$/, loader: "url?limit=8192",exclude: /node_modules/},

            {test:/\.(scss|css)?$/,loader:'style!css!sass',exclude: /node_modules/}

        ]

    },

    resolve:{  //配置node_modules的地址、文件名省略及文件路径简写

        root:'/Users/****/mywork/rwp/node_modules',

        extensions:['','.js','.jsx','.json','.scss'],

        alias:{

            listCss:path.join(__dirname,'./assets/css/list'),

            publicCss:path.join(__dirname,'./assets/css/public'),

            bkCss:path.join(__dirname,'./assets/css/bk'),

            coverCss:path.join(__dirname,'./assets/css/cover'),

            listCp:path.join(__dirname,'./components/list'),

            bkCp:path.join(__dirname,'./components/bk'),

            cbCp:path.join(__dirname,'./components/cb'),

            publicCp:path.join(__dirname,'./components/public'),

            coverCp:path.join(__dirname,'./components/cover')

        }

    },

    eslint:{//eslint配置文件

        configFile:"./.eslintrc.js"

    },

    plugins:[

        new webpack.NoErrorsPlugin(), //防错误打断程序插件

        new DashboardPlugin(),

        new webpack.optimize.CommonsChunkPlugin('vendor',  'vendor.js')

    ]

}

以上是webpack.config.js,用于生产环境的配置文件，下面这个是一个比较粗糙的生产环境配置文件，待优化

var webpack=require('webpack');

var path=require('path');

var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;//代码压缩插件

var CopyWebpackPlugin = require('copy-webpack-plugin');//文件拷贝插件

module.exports={

    entry:{

        "./build/app":path.resolve(__dirname, './js/index.js'),

        "./build/vendor":['react']

    },

    output:{

        publicPath:'/',

        path:path.resolve(__dirname,'../../package'),

        filename:'[name].js'

    },

    module:{

        loaders:[

            {test:/\.js?$/,loaders:['babel','eslint'],exclude: /node_modules/},

            {test:/\.jsx?$/,loaders:['babel','eslint'],exclude: /node_modules/},

            {test: /\.(jpg|png|gif)$/, loader: "url?limit=8192",exclude: /node_modules/},

            {test:/\.(scss|css)?$/,loader:'style!css!sass',exclude: /node_modules/}

        ]

    },

    resolve:{

        root:'/Users/****/mywork/rwp/node_modules',

        extensions:['','.js','.jsx','.json','.scss'],

        alias:{

            listCss:path.join(__dirname,'./assets/css/list'),

            publicCss:path.join(__dirname,'./assets/css/public'),

            bkCss:path.join(__dirname,'./assets/css/bk'),

            coverCss:path.join(__dirname,'./assets/css/cover'),

            listCp:path.join(__dirname,'./components/list'),

            bkCp:path.join(__dirname,'./components/bk'),

            cbCp:path.join(__dirname,'./components/cb'),

            publicCp:path.join(__dirname,'./components/public'),

            coverCp:path.join(__dirname,'./components/cover')

        }

    },

    plugins:[

        new webpack.optimize.DedupePlugin(),//文件内容深度去重

        new uglifyJsPlugin({

            compress: {

                warnings: false

            }

        }),

        new CopyWebpackPlugin([

            { from: 'index.html', to: 'index.html' }

        ])

    ]

}

关于配置文件的详细叙述及各字段意思请大家查看官网：

https://webpack.github.io/docs/configuration.html#module-loaders

下面是package.json

{

  "name": "rwp",

  "version": "1.0.0",

  "description": "this is a test project",

  "main": "server.js",

  "scripts": {

    "build": "webpack --progress --profile --colors --config webpack.production.config.js",

    "start": "webpack-dashboard -- webpack-dev-server --hot --progress --colors"

  },

  "keywords": [

    "test"

  ],

  "babel": {

    "presets": [

      "es2015",

      "react"

    ]

  },

  "author": "jhone lee",

  "license": "ISC",

  "dependencies": {

    "babel-runtime": "^6.11.6",

    "body-parser": "1.15.x",

    "copy-webpack-plugin": "^3.0.1",

    "express": "4.x",

    "jquery": ">=2.x",

    "react": ">=15.2.x",

    "react-redux": "^4.4.5",

    "react-router": "2.6.x",

    "react-router-redux": "^4.0.5",

    "redux": "^3.5.2",

    "redux-logger": "^2.6.1",

    "redux-thunk": "^2.1.0"

  },

  "devDependencies": {

    "babel": "6.x",

    "babel-core": "6.x",

    "babel-eslint": "^6.1.2",

    "babel-loader": "*",

    "babel-plugin-transform-runtime": "^6.12.0",

    "babel-polyfill": "^6.13.0",

    "babel-preset-es2015": "^6.9.0",

    "babel-preset-react": "^6.11.1",

    "babel-preset-stage-0": "^6.5.0",

    "babel-runtime": "^6.11.6",

    "css-loader": "*",

    "eslint": "^3.3.1",

    "eslint-loader": "^1.5.0",

    "eslint-plugin-react": "^5.2.2",

    "file-loader": "^0.9.0",

    "jsx-loader": "^0.13.2",

    "node-sass": "^3.8.0",

    "react-dom": "^15.2.1",

    "redux": "^3.5.2",

    "redux-devtools": "^3.3.1",

    "sass-loader": "^4.0.0",

    "style-loader": "^0.13.1",

    "url-loader": "^0.5.7",

    "webpack": "1.13.1",

    "webpack-dashboard": "^0.1.7",

    "webpack-dev-server": "1.4.x"

  }

}

这里需要注意的script里面需要执行的命令：

npm run build 会运行生产环境的config文件

npm start 会运行开发环境的config文件

后面至于 redux及react-router怎么用，以及.babelrc 和 .eslintrc怎么配置不在本文的讨论范畴

仅粘出我的两个rc文件

module.exports = {

    "parser":"babel-eslint",

    "env": {

        "browser": true,

        "commonjs": true,

        "es6": true

    },

    "extends": "eslint:recommended",

    "parserOptions": {

        "ecmaFeatures": {

            "experimentalObjectRestSpread": true,

            "jsx": true

        },

        "sourceType": "module"

    },

    "plugins": [

        "react"

    ],

    "rules": {

        "indent": [

            "warn",

            4

        ],

        "linebreak-style": [

            "warn",

            "unix"

        ],

        "quotes": [

            "warn",

            "double"

        ],

        "semi": [

            "error",

            "always"

        ],

        "no-unused-vars":[

             "warn",

             {

                "vars": "all",

                "args": "after-used"

             }

        ],

        "no-console":[

            "error",{

                "allow":["log","error","warn"]

        }],

        "no-constant-condition":[

            "warn",{

                "checkLoops":false

            }

        ],

        "no-fallthrough":["warn",{

            "commentPattern": "break[\\s\\w]*omitted"

        }]

    }

};

以上为 .eslintrc

{

 "presets": [ "es2015", "stage-0","react"],

 "plugins": [

    ["transform-runtime", {

      "polyfill": false,

      "regenerator": true

    }]

  ]

}

以上为 .babelrc

至于react-router及redux怎么用，以后有时间再说

巴特西

react+webpack+babel+eslint+redux+react-router+sass 环境快速搭建

最新文章

热门文章