再看本篇文章之前，本人還是建議想入坑react的童鞋可以選有create-react-app來創建react的項目，因為現在dva和roadhog還不成熟，坑相對要多一些，當然如果你已經做好跳坑的准備，那么請繼續往下走；
本文適合對 ES6+webpack 有一定了解的人。沒有的了解的同學可以先看看下面的我分享的鏈接，
ES6: http://www.jianshu.com/p/ebfe...
Webpack: https://doc.webpack-china.org...
react: https://facebook.github.io/re...
antd-mobile:https://mobile.ant.design/doc...
扯完啦，接下來就是正題啦，先看效果
今天主要是想給大家說一下怎么用dva來搭建react的項目
第一步
安裝 dva 和 roadhog；
npm i dva-cli roadhog -g
好啦～現在你已經學會了怎么安裝dva和roadhog啦，接下來就可以創建項目啦第二步
創建項目
dva new projectName
npm install
npm start
打開瀏覽器輸入localhost:8000,看到歡迎界面證明第二步已經成功啦
第三步
添加配置文件和安裝webpack
安裝 lodash babel-plugin webpack-plugin shim 並添加到package.json文件中
npm install --save-dev webpack 安裝本地webpack配置文件
webpack 文件
// webpack配置
import glob from 'glob';
import webpack from 'webpack';
import { isRegExp } from 'lodash';
import pxtorem from 'postcss-pxtorem';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import LodashModuleReplacementPlugin from 'lodash-webpack-plugin';
const path = require('path');
export default ( webpackConfig, env ) => {
const loaders = webpackConfig.module.loaders;
const postcss = webpackConfig.postcss;
webpackConfig.postcss = function () {
const postcssArray = postcss();
postcssArray.push( pxtorem( {
rootValue: 100,
propWhiteList: []
} ) );
return postcssArray;
};
const svgDirs = [
require.resolve( 'antd-mobile' ).replace( /warn\.js$/, '' ), // antd-mobile 內置svg // 引入antd-mobile
path.resolve(__dirname, 'src/assets/icon'),
];
loaders.forEach( ( loader ) => {
if ( loader.test && loader.test.toString() === '/\\.svg$/' ) {
loader.exclude = svgDirs;
}
} );
loaders.unshift( {
test: /\.svg$/,
loader: 'svg-sprite',
include: svgDirs
} );
const noParse = webpackConfig.module.noParse;
if ( Array.isArray( noParse ) ) {
noParse.push( /moment.js/ );
}
else if ( noParse ) {
webpackConfig.module.noParse = [ noParse, /moment.js/ ];
}
else {
webpackConfig.module.noParse = [ /moment.js/ ];
}
// lodash
webpackConfig.babel.plugins.push( 'lodash' );
webpackConfig.plugins.push( new LodashModuleReplacementPlugin() );
loaders.push( {
test: /\.(png|jpg|jpeg|gif)(\?v=\d+\.\d+\.\d+)?$/i,
loader: 'file'
} );
// 打包配置
if ( env === 'production' ) {
//添加hash
webpackConfig.output.filename = '[name].[chunkhash:6].js';
webpackConfig.output.chunkFilename = '[name].[chunkhash:6].js';
webpackConfig.plugins.forEach( ( plugin, index, plugins ) => {
if ( plugin instanceof ExtractTextPlugin ) {
plugins[ index ] = new ExtractTextPlugin( '[name].[chunkhash:6].css', {
disable: false,
allChunks: true
} );
}
else if ( plugin instanceof webpack.optimize.CommonsChunkPlugin ) {
plugins[ index ] = new webpack.optimize.CommonsChunkPlugin(
'common',
'common.[chunkhash:6].js'
);
}
} );
}
//HTML
webpackConfig.module.loaders = loaders.filter(
loader => isRegExp( loader.test ) && loader.test.toString() !== '/\\.html$/'
);
webpackConfig.plugins.push(
new HtmlWebpackPlugin( {
// favicon: './src/logo/logo.ico',
template: './src/index.html',
filename: 'index.html',
inject: true
} )
);
return webpackConfig;
};
到現在你已經完成了一半啦 是不是覺得很簡單。對啦 這里有一點要注意，復制 es5-shim.min.js es5-sham.min.js console-polyfill/index.js 文件到 public 文件夾console-polyfill/index.js 改名為 console-polyfill.js
第四步 roadhog、proxy配置和antd-mobile引入
廢話不說 這步直接上代碼（對應的是目錄中的.roadhogrc.js，大學按步驟下來的話這應該是.roadhogrc.json的文件，但是本人還是比較喜歡js語法，所以做了修改，此處因人而異）
import path from 'path';
export default {
'/api': {
target:'localhost',//這里是你的接口地址，我隨便寫的
changeOrigin: true
},
multipage: true,
theme: 'antd.config.js',
entry: [ 'src/common.js', 'src/index.js' ],
env: { //下面是在開發環境和生產環境都引入antd-mobile
development: {
extraBabelPlugins: [
'dva-hmr',
'transform-runtime',
[ 'import', { libraryName: 'antd-mobile', style: true }]
]
},
production: {
extraBabelPlugins: [
'transform-runtime',
[ 'import', { libraryName: 'antd-mobile', style: true }]
]
}
}
};
好啦，以上四步差不多就可以用dva把react的項目架子搭建起來，再有就是eslint的配置啦，此處不做講解（http://eslint.org/docs/user-g...）,接下來你可以在src中嘗試着運行一下Hello World啦
還有一個點需要注意的是，dva 建項目的時候會默認安裝redux和react-router，所以在開發中千萬不要在去安裝，會因為版本不兼容而導致項目無法運行；
最后給大家分享一些用到的資料
antd主題制定: https://ant.design/docs/react...
roadhog: https://github.com/sorrycc/ro...
webpack中proxy配置: https://webpack.github.io/doc...
redux: http://www.redux.org.cn/
react-router: http://react-guide.github.io/...
項目地址：https://github.com/tengwei30/...