React 开发环境配置

create-react-app

使用官方提供的 create-react-app 来生成初始化脚手架。

1
create-react-app demo

添加 stylus 支持

(这里添加 stylus 支持是因为之前的老代码使用过 stylus,同理可添加 less 和 scss 支持)

create-react-app 当前使用的最新版本为 1.5.2,添加 stylus 需要执行如下操作:

1
yarn add --dev stylus stylus-loader

随后执行 yarn run eject 弹出配置。

弹出配置后,执行 yarn 安装剩余所需依赖包。

在弹出的配置中,配置 config/webpack.config.dev.js,找到如下部分:

1
2
3
4
5
6
7
8
9
10
11
12
oneOf: [
// "url" loader works like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
}

在其下添加 stylus 的配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
oneOf: [
// "url" loader works like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
// Process Stylus with Babel.
{
test: /\.styl$/,
use: [
require.resolve('style-loader'),
require.resolve('css-loader'),
require.resolve('stylus-loader')
]
},
// Process JS with Babel.

识别 .styl 后缀加载 stylus-loader。

支持装饰器配置

由于使用 MobX 来进行状态管理,虽然也有不适用装饰器的写法,但是官方推荐使用装饰器,因而接下来添加装饰器支持。

安装依赖支持:

1
yarn add --dev babel-preset-stage-2 babel-plugin-transform-decorators-legacy

config/webpack.config.dev.js 找到如下部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Process JS with Babel.
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.

presets: [require.resolve('babel-preset-stage-2'), require.resolve('babel-preset-react-app')],
plugins: [
require.resolve('babel-plugin-transform-decorators-legacy'),
],
cacheDirectory: true,
},

即可,另外一种方式是将配置写在 .babelrc 配置文件中,需要将上述配置中的 babelrc: false 改为 babelrc: true。下面的 presets 和 plugins 都可以去掉。

在项目根目录新建一个 .babelrc 配置文件,在其中写入:

1
2
3
4
5
6
7
8
9
{
"presets": [
"babel-preset-stage-2",
"babel-preset-react-app"
],
"plugins": [
"transform-decorators-legacy"
]
}

即可启用。

配置按需引入

使用 antd 或者使用 antd-mobile 时,引入模块需要同时引入样式文件,配置按需引入会将组件需要的样式自动引入,无需手动引入。

安装插件:

1
yarn add babel-plugin-import

在上述配置的 babel 中,plugins 新增:

1
2
3
4
5
6
7
8
9
10
{
"presets": [
"babel-preset-stage-2",
"babel-preset-react-app"
],
"plugins": [
"transform-decorators-legacy",
["import", { "libraryName": "antd-mobile", "style": "css" }]
]
}

注意 transform-decorators-legacy 需要保持在插件第一个。

libraryName 为需要引入的库的名称。

配置模块热替换(HMR)

顾名思义,webpack 启动的 server 会根据修改自动刷新页面,但有时往往修改的只是一个小模块,因而实现模块的局部刷新可以提高开发效率,也可以避免全局刷新对某些情景下的调试。

src/index.js 中,添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
ReactDOM.render(
<Provider {...stores}>
<App />
</Provider>
,document.getElementById('root'));

// 被添加的部分
if (module.hot) {
module.hot.accept();
}

registerServiceWorker();

-EOF-

  • 本文作者: Author
  • 本文链接: https://rainylog.com/post/react-dev-env/
  • 版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-ND 4.0 许可协议。转载请注明出处!