react技术栈实践（1）
本文来自网易云社区
作者：汪洋
背景
最近开发一个全新AB测试平台，思考了下正好可以使用react技术开发。
实践前技术准备
首先遇到一个概念，redux。这货还真不好理解，大体的理解：Store包含所有数据，视图触发一个Action，Store收到Action后，返回一个新的 State，这样视图就发生变化，State计算过程叫做 Reducer，Reducer其实就是一个处理数据的函数，接受 Action和 当前State作为参数，返回一个新的 State。
明白这个后，就可以开始实践了。
搭建平台的脚手架
对于我这方面没搞过的菜鸟，还真是不容易。接下来说下作为新手如何实践的。
第一步：依赖包
"devDependencies": {"babel-core": "^6.26.0",
"babel-eslint": "^8.2.2",
"babel-loader": "^7.1.2",
"babel-plugin-import": "^1.6.6",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.7",
"eslint": "^4.18.2",
"eslint-config-airbnb": "^16.1.0",
"eslint-loader": "^2.0.0",
"eslint-plugin-import": "^2.9.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.7.0",
"extract-text-webpack-plugin": "^3.0.2",
"html-webpack-plugin": "^3.0.4",
"less": "^2.7.3",
"less-loader": "^4.0.6",
"style-loader": "^0.19.1",
"url-loader": "^1.0.1",
"webpack": "^3.1.0"},"dependencies": {
"normalize.css": "^8.0.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^5.0.7",
"react-router-dom": "^4.2.2",
"redux": "^3.7.2"}
dependencies 中引入的依赖包，是react的标配了，不用解释。
devDependencies 中引入了 webpack，babel，babel插件，eslint语法检测，eslint配置包airbnb，html模板资源替换插件 html-webpack-plugin，css提取插件 extract-text-webpack-plugin，less编译相关插件，图片等静态资源路径处理插件 url-loader。
这里作为新手，一般都是参考网上的配置，比如我就是github上找了个项目，摸索一下。推荐一本教程书《React全栈》，作者写的很详细，对入门绝对有帮助。
至此，基本依赖包已加载完。第二步：webpack配置 这里不得不说，新手真不容易。 首先介绍下项目结构：
views/entry.html（静态模板）,
src/entry.jsx（入口文件），
src/actions（redux概念中Actions所在的文件夹） ,
src/reducers（redux概念中Reducers所在的文件夹） ,
src/store（redux概念中Store所在的文件夹） ,
src/pages（存放页面的文件夹,jsx），
src/compinents（存放业务组件的文件夹,jsx），
src/style（公共样式文件夹,less），
src/utils（帮助类文件夹），
src/constants（常量所在文件夹，保存各自的actions的type），
src/plugins（第三方插件文件夹），
build/（编译后文件），
webpack/（webpack编译配置所在文件夹）,
.eslintrc（eslint配置文件），
.gitignore（git配置文件），
package.json
接下来就是webpack的配置了，先上代码
const path = require('path');const webpack = require('webpack');// html中替换编译后的jsconst HtmlwebpackPlugin = require('html-webpack-plugin');// css提取const ExtractTextPlugin = require('extract-text-webpack-plugin');const ROOT_PATH = path.resolve(__dirname);const APP_PATH = path.resolve(ROOT_PATH, '../src');const BUILD_PATH = path.resolve(ROOT_PATH, '../build');module.exports = { entry: {
entry: path.resolve(APP_PATH, './entry.jsx'),
vendor: ['react', 'react-dom', 'pace']
},
output: {
filename: '[name].js',
path: BUILD_PATH,
chunkFilename: '[name].js',
publicPath: '../'
},
devtool: 'eval-source-map', module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
query: {
presets: ['es2015', 'react', 'stage-0'],
plugins: ['syntax-dynamic-import', ['import', { libraryName: 'antd', style: 'css' }]]
}
}
]
},
{
test: /\.(css|less)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [ 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]', 'less-loader'
]
}),
exclude: /node_modules/
},
{
test: /\.(css)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [ 'css-loader'
]
}),
include: /node_modules/
},
{
test: /\.(jpg|jpeg|png|svg|gif|bmp)/i,
use: [ 'url-loader?limit=5000&name=img/[name].[sha512:hash:base64:8].[ext]'
]
},
{
test: /\.(woff|woff2|ttf|eot)($|\?)/i,
use: [ 'url-loader?limit=5000&name=fonts/[name].[sha512:hash:base64:8].[ext]'
]
}
]
},
resolve: {
extensions: ['.js', '.jsx', '.less', '.css', '.png', '.jpg', '.svg', '.gif', '.eot'],
alias: {
pace: path.resolve(ROOT_PATH, '../src/plugins/pace/index.js'),
ImagesPath: path.resolve(ROOT_PATH, '../src/')
}
},
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true
},
plugins: [ new webpack.optimize.CommonsChunkPlugin({
name: ['commons', 'vendor'],
minChunks: 2
}), new ExtractTextPlugin('commons.css', {
allChunks: true
}), new HtmlwebpackPlugin({
template: path.resolve(ROOT_PATH, '../views/entry.html'),
filename: path.resolve(ROOT_PATH, '../build/entry.html'),
chunks: ['entry', 'vendor'],
hash: false
}), // 加署名
new webpack.BannerPlugin('Copyright by xxx')
]
};
第一次接触配置，真的找不到北，太多插件，太多功能。作为新手，那需要怎么个思路，我总结：按项目需求来配置。不要认为其他人配置的就适合自己项目，要不然给自己带来各种麻烦。 摸索这个过程还挺长的：
A. 首先需求还是明确的：less编译、jsx编译、公共文件单独打包、html静态模板中插入编译后的文件路径、css提取。 上面这些对应配置：
const path = require('path');const webpack = require('webpack');// html中替换编译后的jsconst HtmlwebpackPlugin = require('html-webpack-plugin');// css提取const ExtractTextPlugin = require('extract-text-webpack-plugin');const ROOT_PATH = path.resolve(__dirname);const APP_PATH = path.resolve(ROOT_PATH, '../src');const BUILD_PATH = path.resolve(ROOT_PATH, '../build');module.exports = { entry: {
entry: path.resolve(APP_PATH, './entry.jsx'),
vendor: ['react', 'react-dom', 'pace']
},
output: {
filename: '[name].js',
path: BUILD_PATH,
chunkFilename: '[name].js',
publicPath: '../'
},
devtool: 'eval-source-map', module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
query: {
presets: ['es2015', 'react', 'stage-0']
}
}
]
},
{
test: /\.(css|less)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [ 'css-loader', 'less-loader'
]
}),
exclude: /node_modules/
},
{
test: /\.(jpg|jpeg|png|svg|gif|bmp)/i,
use: [ 'url-loader?limit=5000&name=img/[name].[sha512:hash:base64:8].[ext]'
]
},
{
test: /\.(woff|woff2|ttf|eot)($|\?)/i,
use: [ 'url-loader?limit=5000&name=fonts/[name].[sha512:hash:base64:8].[ext]'
]
}
]
},
plugins: [ new webpack.optimize.CommonsChunkPlugin({
name: ['commons', 'vendor'],
minChunks: 2
}), new ExtractTextPlugin('commons.css', {
allChunks: true
}), new HtmlwebpackPlugin({
template: path.resolve(ROOT_PATH, '../views/entry.html'),
filename: path.resolve(ROOT_PATH, '../build/entry.html'),
chunks: ['entry', 'vendor'],
hash: false
})
]
};
B. 配置到这步后，就能满足基本开发了。试用之后，这时候对自己提出了几个问题：
命名css，开发的时候能不能不用担心命名冲突的问题。
css中引入图片后，编译失败问题。
第三方插件 加载效果pace组件，引入问题。
现在文件过大，有根据路由按需加载需求。
针对上面4个问题，重新配置：
第2个和3个解决方案一致：即声明别名
resolve: { extensions: ['.js', '.jsx', '.less', '.css', '.png', '.jpg', '.svg', '.gif', '.eot'],
alias: {
pace: path.resolve(ROOT_PATH, '../src/plugins/pace/index.js'),
ImagesPath: path.resolve(ROOT_PATH, '../src/')
}
}
当中第3个问题，网上找了好多资料，都没有结果，后来请教了前端群的同行，才解决该问题。
解决第1个问题过程中，我学习到了cssModule的概念，一开始菜鸟还不好理解，实践了后，还真是个好东西。
{ test: /\.(css|less)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [ 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]', 'less-loader'
]
}),
exclude: /node_modules/
},
只要css-loader启动modules就好了。为了支持 react，引入了 react-css-modules 依赖包。
网易云免费体验馆，0成本体验20+款云产品
更多网易研发、产品、运营经验分享请访问网易云社区。
相关文章：
【推荐】 git 常用命令
【推荐】 接口文档神器Swagger（上篇）
以上是 react技术栈实践（1） 的全部内容， 来源链接： utcz.com/z/382631.html
