上一篇：从零开始搭建 React项目（一）
上一篇已经启动起来一个 hello world 页面了，下面添加一些其他插件以便让我们可以更好的开发代码。
1. 其他文件的 loader 以及 babel-polyfill
我们之前只是添加了对 js/jsx 文件的 loader，对于图片或者 css 文件还没有出来，所以这个时候我们只能编写 js 文件，现在添加一些其他的 loader。同时为了更好的支持所有的 ES6 属性，添加 babel-polyfill。
webpack.config.js
require('babel-polyfill');
const path = require('path');
const autoprefixer = require('autoprefixer');
const postcssPresetEnv = require('postcss-preset-env');
module.exports = {
devtool: 'source-map',
mode: 'development',
devServer: {
host: '0.0.0.0',
port: '8000',
},
entry: './src/entry',
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist/'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
include: [
path.resolve(__dirname, 'src')
],
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
},
{
test: /\.(c|sc|sa)ss$/,
include: [
path.resolve(__dirname, 'src'),
path.resolve(__dirname, 'node_modules')
],
// exclude: /node_modules/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 2 } },
{
loader: "postcss-loader",
options: {
ident: 'postcss',
plugins: () => [
postcssPresetEnv(),
// require('postcss-import')(),
autoprefixer('last 2 versions')
]
},
},
'sass-loader'
]
}
],
}
};
npm install babel-polyfill -D
npm install url-loader css-loader postcss-loader sass-loader style-loader postcss-preset-env autoprefixer node-sass file-loader -D
2. 添加 React Router
由于 react router 在 4.x 版本做了较大改动，所以这里下载 3.2.1 版本，具体使用方法可以去官网查看
npm install react-router@3.2.1
router.js
import React from 'react';
import { hashHistory, Router, Route, IndexRoute } from 'react-router';
import Index from '../pages/index';
import Index2 from '../pages/index2';
function RouterConfig() {
return (
<Router history={hashHistory}>
<Route path="/">
<IndexRoute component={Index} />
</Route>
<Route path="/index" component={Index} />
<Route path="/index2" component={Index2} />
</Router>
);
}
export default RouterConfig;
index.js
import React, { Component } from 'react';
import ReactDom from 'react-dom';
import RouterConfig from './router';
ReactDom.render(<RouterConfig />, document.getElementById('app'));
3. 添加 eslint，stylelint
[eslint](https://eslint.org)，[stylelint](https://stylelint.io) 可以更好的在编码阶段帮助我们找出错误，提高开发效率，需要注意的的，要开启 lint 不仅需要在项目中进行配置，还需要相应的编辑器的插件支持， 这里 eslint 继承 aribnb 的 js 编码风格，并加入一些自己的规则
npm install babel-eslint eslint-config-airbnb eslint eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-react -D
npm i stylelint-config-standard stylelint-scss stylelint -D
.eslintrc
{
"root": true,
"parser": "babel-eslint",
"extends": "eslint-config-airbnb",
"env": {
"browser": true,
"node": true,
"mocha": true
},
"parserOptions": {
"sourceType": "module"
},
"globals": {
"React": true
},
"rules": {
"import/no-unresolved": 0,
"no-console": 0,
"react/prefer-stateless-function": 0,
"react/react-in-jsx-scope": 0,
"react/prop-types": 0,
"react/destructuring-assignment": 0,
"react/jsx-filename-extension": 0,
"react/jsx-one-expression-per-line": 0
},
"ecmaFeatures": {
"experimentalObjectRestSpread": true
}
}
.stylelintrc
{
"extends": "stylelint-config-standard",
"plugins": ["stylelint-scss"],
"rules": {
"no-eol-whitespace": null,
"no-invalid-double-slash-comments": null,
"no-empty-source": null
}
}
4. 其他
这个时候当你打包 js 代码的时候，你会发现你的 css 样式也会一起打包进 js 文件之中，需要添加 mini-css-extract-plugin 插件将 css 代码分离出来
npm i mini-css-extract-plugin -D
有的时候你会引用一些外部的插件（如 jQuery，eCharts等）来进行开发，而你不想将这些插件打进 js 包里面，可以通过设置 webpack 的 externals 参数来忽略这些插件
externals: {
'react': 'React',
'react-dom': 'ReactDOM'
}
这时你就可以从 cdn 中引用 react 和 react-dom 来进行使用
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My React Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="dist/index.css" />
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="dist/index.js"></script>
</body>
</html>
webpack.config.js
require('babel-polyfill');
const path = require('path');
const autoprefixer = require('autoprefixer');
const postcssPresetEnv = require('postcss-preset-env');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
devtool: 'source-map',
mode: 'development',
devServer: {
host: '0.0.0.0',
port: '8000',
},
entry: './src/entry',
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist/'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
include: [
path.resolve(__dirname, 'src')
],
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
},
{
test: /\.(c|sc|sa)ss$/,
include: [
path.resolve(__dirname, 'src'),
path.resolve(__dirname, 'node_modules')
],
// exclude: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
{ loader: 'css-loader', options: { importLoaders: 2 } },
{
loader: "postcss-loader",
options: {
ident: 'postcss',
plugins: () => [
postcssPresetEnv(),
// require('postcss-import')(),
autoprefixer('last 2 versions')
]
},
},
'sass-loader'
]
}
],
},
externals: {
'react': 'React',
'react-dom': 'ReactDOM'
},
resolve: {
modules: ['node_modules', path.join(__dirname, '../node_modules')],
extensions: ['.jsx', '.wasm', '.mjs', '.js', '.json']
},
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: 'index.css',
})
]
};
webpack 还提供了很多插件供我们使用，比如代码分析，代码分割等，有兴趣的可以自己去 github 或者官网试着添加看看。
其他的开发用的插件如 redux，redux-sage，antd，mobX 等可按照 github / 官网指引自行添加。
至此，一个基于 react 的基础框架已经介绍完毕，完整例子已放在我的 github 上面。
