create-react-app + webpack + antd + less + mobx 的demo入门配置

需要安装有较新版本的node,下面直接开始。

1. 脚手架工具create-react-app

npm install -g create-react-app
create-react-app react-web-demo
cd react-web-demo
yarn start
复制代码

命令如上，然后打开 http://localhost:3000/查看app，可以看到

则说明最基本的安装已经。

2. 打开自定义配置yarn eject 在create-react-app react-web-demo命令之后，官方提供了4个命令。 分别是 yarn start: 启动服务并在浏览器中查看。 yarn build:build 应用程序，可以部署发布。 yanr eject: 打开自定义配置。 使用IDE打开项目目录，结构不做太多说明， 如下：

   作为最基本的配置，可以满足大部分的开发需求，但是需要加一些自定义的配置，比如less的使用等。 yarn eject打开自定义，不可逆。 可以看到多了script和config目录。

3. 添加less支持 首先安装开发所需模块

npm install --save-dev less
npm install --save-dev less-loader
复制代码

接着在config/webpack.config.dev.js做如下修改：

{
                        // modify
                        test: [/\.css$/, /\.less$/],
                        use: [
                            require.resolve('style-loader'),
                            {
                                loader: require.resolve('css-loader'),
                                options: {
                                    importLoaders: 1,
                                },
                            },
                            {
                                loader: require.resolve('postcss-loader'),
                                options: {
                                    // Necessary for external CSS imports to work
                                    // https://github.com/facebookincubator/create-react-app/issues/2677
                                    ident: 'postcss',
                                    plugins: () => [
                                        require('postcss-flexbugs-fixes'),
                                        autoprefixer({
                                            browsers: [
                                                '>1%',
                                                'last 4 versions',
                                                'Firefox ESR',
                                                'not ie < 9', // React doesn't support IE8 anyway
                                            ],
                                            flexbox: 'no-2009',
                                        }),
                                    ],
                                },
                            },
                            //add
                            {
                                loader: require.resolve('less-loader'), // compiles Less to CSS
                            }
                        ],
                    },
复制代码

在config/webpack.config.prod.js做如下修改：

{
                        // modify
                        test: /\.(css|less)$/,
                        loader: ExtractTextPlugin.extract(
                            Object.assign(
                                {
                                    fallback: {
                                        loader: require.resolve('style-loader'),
                                        options: {
                                            hmr: false,
                                        },
                                    },
                                    use: [
                                        {
                                            loader: require.resolve('css-loader'),
                                            options: {
                                                importLoaders: 1,
                                                minimize: true,
                                                sourceMap: shouldUseSourceMap,
                                            },
                                        },
                                        {
                                            loader: require.resolve('postcss-loader'),
                                            options: {
                                                // Necessary for external CSS imports to work
                                                // https://github.com/facebookincubator/create-react-app/issues/2677
                                                ident: 'postcss',
                                                plugins: () => [
                                                    require('postcss-flexbugs-fixes'),
                                                    autoprefixer({
                                                        browsers: [
                                                            '>1%',
                                                            'last 4 versions',
                                                            'Firefox ESR',
                                                            'not ie < 9', // React doesn't support IE8 anyway
                                                        ],
                                                        flexbox: 'no-2009',
                                                    }),
                                                ],
                                            },
                                        },
                                        {
                                            //add
                                            loader: require.resolve('less-loader'),
                                        }
                                    ],
                                },
                                extractTextPluginOptions
                            )
                        ),
                        // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
                    },
复制代码

下面测试是否添加成功。 在src目录下新建component文件夹放置子组件，index.js和index.less作为根组件。

//index.js

import React from 'react'
import './index.less'

const Home = () => {
    return(
        <div className='Home'>
            <div>react demo</div>
            <div>react demo</div>
            <div>react demo</div>
        </div>

    );
}

export default Home
复制代码

//index.less

.Home {
  background: beige;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
}
复制代码

修改App.js:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css'
import Home from './component/index'

class App extends Component {
  render() {
    return (
      <div className="App">
        <Home />
      </div>
    );
  }
}

export default App;
复制代码

打开浏览器，可以看到如下图，说明配置成功。

4. 使用antd开发，并添加按需加载配置。

npm install --save antd
npm install babel-plugin-import --save-dev
复制代码

修改文件如下：

//webpack.config.dev.js
{
                        test: /\.(js|jsx|mjs)$/,
                        include: paths.appSrc,
                        loader:  require.resolve('babel-loader'),
                        options: {

                            // 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.
                            cacheDirectory: true,
                            //add
                            plugins: [["import", { "libraryName": "antd", "style": true }]]
                        },


                    },
复制代码

//webpack.config.prod.js
{
                        test: /\.(js|jsx|mjs)$/,
                        include: paths.appSrc,
                        loader: require.resolve('babel-loader'),
                        options: {

                            compact: true,
                            plugins: [["import", { "libraryName": "antd", "style": true }]]
                        },
                    },
复制代码

测试是否配置成功。 修改index.js文件如下：

import React from 'react'
import './index.less'
import {Button} from 'antd'

const Home = () => {
    return(
        <div className='Home'>
            <Button type="primary">Button</Button>
            <Button type="primary">Button</Button>
            <Button type="primary">Button</Button>
        </div>
    );
}
export default Home
复制代码

看浏览器界面如下则配置成功。

最后执行npm run-script build生成app，按照提示 http://localhost:5000/ 查看浏览器显示结果是否一样，一样则配置成功。 注意：这一步浏览器可能会有缓存，build之后建议清除浏览器缓存再查看

配置结束，关于mobx的使用，可参考另一篇文章。

---

接上次所说，另外一篇文章是关于RN + mobx， 部分内容可能不合适，今天作为补充。

redux 和 mobx

过多的内容这里不做叙述，请看下面链接(可以知道是什么和为什么，很短) 如何理解 Facebook 的 flux 应用架构？ 理解 React，但不理解 Redux，该如何通俗易懂的理解 Redux？ MobX vs Redux: Comparing the Opposing Paradigms - React Conf 2017 纪要

（对于redux，请参看Redux 入门教程（三）：React-Redux 的用法）

mobx + mobx-react

npm install mobx
npm install mobx-react
复制代码

此时可以使用mobx开发，接下来配置启用decorators装饰器。

yarn add babel-plugin-transform-decorators-legacy -D
复制代码

并在package.json文件中修改如下配置：

  "babel": {
    "plugins": [
      "transform-decorators-legacy"
    ],
    "presets": [
      "react-app"
    ]
  },
复制代码

这是可以用方便易懂的装饰器进行开发。修改文件如下：

//component/index.js
const Home = observer( () => {
    return (
        <div className='Home'>
            <div>{startNum.startNum}</div>
            <div>{startNum.startNum}</div>
            <div className="buttons">
                <Button type="primary" className="btn" onClick={() => {
                    startNum.inc()
                }}>inc</Button>
                <Button type="primary" className="btn" onClick={() => {
                    startNum.dec()
                }}>dec</Button>
                <Button type="primary" className="btn" onClick={() => startNum.reset()}>reset</Button>
            </div>
        </div>
    );
} )

export default Home
复制代码

//component/index.less
.Home {
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  .buttons {
    display: flex;
    flex-direction: row;
    margin-top: 20px;
    .btn {
      margin: 0 10px;
    }
  }
}
复制代码

在src目录新建mobx/index.js文件，作为最基本的store数据源。

class DemoStore {

    @observable startNum = 10

    @action
    inc() { this.startNum += 1 }

    @action
    dec() { this.startNum -= 1}

    @action
    reset() { this.startNum = 0 }
}
export default new DemoStore()
复制代码

yarn start后打开浏览器，看到下图并且可以操作，配置成功。

关于mobx的其他用法可以查看官方文档。 随着项目变大，如何对mobx的store进行组合，也是我目前在研究的问题。