React+webpack+Eslint+Babel构建React脚手架
所用技术栈
React
Babel
Webpack
Eslint
travis
ES6
构建过程
安装nodejs
初始化项目：
npm init -y 注：-y的意思是默认安装
目录构建
配置package.json
添加：
"dependencies": {
"babel-runtime": "6.x","react": "15.x","react-dom": "15.x"
},"devDependencies": {
"babel-core": "6.x","babel-eslint": "7.x","babel-loader": "6.x","babel-plugin-transform-runtime": "6.x","babel-preset-es2015": "6.x","babel-preset-react": "6.x","babel-preset-stage-0": "6.x","copy-webpack-plugin": "latest","css-loader": "~0.26.1","eslint": "latest","eslint-config-airbnb": "latest","eslint-formatter-pretty": "^1.1.0","eslint-plugin-compat": "^1.0.0","eslint-plugin-import": "latest","eslint-plugin-jsx-a11y": "3.x","eslint-plugin-promise": "^3.4.0","eslint-plugin-react": "latest","open-browser-webpack-plugin": "0.0.3","style-loader": "~0.13.1","webpack": "1.x","webpack-dev-server": "1.x"
}
或者在命令行中使用安装命令，加深印象。注：-S是安装在生产环境，-D安装在开发环境。
//安装react npm install react -S npm install react-dom -S //减少打包的时候重复代码 npm install babel-runtime -S npm install babel-plugin-transform-runtime -D //安装babel相关 npm install babel-loader -D //安装babel-loader npm install babel-core -D //安装babel核心 npm install babel-preset-es2015 -D //支持ES2015 npm install babel-preset-react -D //支持jsx npm install babel-preset-stage-0 -D //支持ES7 npm install babel-eslint -D //安装webpack npm install webpack -D //模块管理和打包工具 npm install webpack-dev-server -D //监听代码自动刷新 //安装Eslint相关 npm install eslint -D npm install eslint-config-airbnb -D npm install eslint-formatter-pretty -D npm install eslint-plugin-compat -D npm install eslint-plugin-import -D npm install eslint-plugin-jsx-a11y -D npm install eslint-plugin-promise -D npm install eslint-plugin-react -D
配置webpack.config.js
Webpack将项目中的所有静态资源都当做模块，模块之间可以互相依赖，由webpack对它们进行统一的管理和打包发布。
安装webpack后，手动创建文件进行定制。
webpack.production.config.js与之类似。
const webpack = require('webpack');
const path = require('path');
const OpenbrowserPlugin = require('open-browser-webpack-plugin');
module.exports = {
devServer: {
historyApiFallback: true,hot: true,inline: true,progress: true,contentBase: './app',port: 8080
},entry: [
'webpack/hot/dev-server','webpack-dev-server/client?http://localhost:8080',path.resolve(__dirname,'app/main.jsx')
],output: {
path: path.resolve(__dirname,'build'),publicPath: '/',filename: './bundle.js'
},module: {
loaders: [
{ test: /\.css$/,include: path.resolve(__dirname,'app'),loader: 'style-loader!css-loader' },{ test: /\.js[x]?$/,exclude: /node_modules/,loader: 'babel-loader' }
]
},resolve: {
extensions: ['','.js','.jsx']
},plugins: [
new webpack.HotModuleReplacementPlugin(),new OpenbrowserPlugin({ url: 'http://localhost:8080' })
]
};
配置.babelrc
babel是ES2015 语法转化器，可从Babel学习其用法。
安装babel后，手动创建进行配置。
{
"presets": [ "es2015","stage-0","react"],"env": {
"build": {
"optional": ["optimisation","minification"]
}
}
}
配置.eslintrc
ESLint是一个QA工具，用来避免低级错误和统一代码的风格。
安装eslint后，手动创建进行配置。
{
"parser": "babel-eslint","extends": "airbnb","env": {
"browser": true,"node": true
},"parserOptions": {
"ecmaVersion": 6,"sourceType": "module","ecmaFeatures": {
"jsx": true
}
},"globals": {
"window": true,"document": true
},"rules": {
"arrow-parens": 0,"class-methods-use-this": 0,"compat/compat": 2,"comma-dangle": 0,"consistent-return": 2,"func-names": 2,"generator-star-spacing": [0],"import/no-extraneous-dependencies": ["off"],"import/extensions": 0,"import/no-unresolved": 2,"new-cap": 0,"no-implicit-coercion": "error","no-mixed-operators": 0,"no-plusplus": 0,"no-use-before-define": 0,"no-nested-ternary": 0,"no-underscore-dangle": 0,"no-var": "error","semi": ["error","always"],"promise/param-names": 2,"promise/always-return": 2,"promise/catch-or-return": 2,"promise/no-native": 0
},"plugins": [
"compat","import","promise"
]
}
配置.travis.yml
Travis Ci是一个基于云的持续集成项目，目前已经支持大部分主流语言了，如：C、PHP、Ruby、Python、Nodejs、Java、Objective-C等等，Travis Ci与Github集成非常紧密，官方的集成测试托管只支持Github项目，不过你也可以通过Travis Ci开源项目搭建一套属于自己的方案。
sudo: false language: node_js node_js: - "node"
最后贴上自己的Github，前端小白，欢迎指导。
