React 开发环境配置

Posted on

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-

本博客所有文章除特别声明外，均采用 CC BY-NC-ND 4.0 许可协议。转载请注明出处！ © 雨落
Index Bio
  1. 1. create-react-app
  2. 2. 添加 stylus 支持
  3. 3. 支持装饰器配置
  4. 4. 配置按需引入
  5. 5. 配置模块热替换(HMR)