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

时间 2019-11-24

标签 create react app webpack antd mobx demo 入门配置栏目 React 繁體版

原文原文链接

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

脚手架工具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，能够看到html

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

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

做为最基本的配置，能够知足大部分的开发需求，可是须要加一些自定义的配置，好比less的使用等。 yarn eject打开自定义，不可逆。能够看到多了script和config目录。
添加less支持首先安装开发所需模块react

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

接着在config/webpack.config.dev.js作以下修改：webpack

{
                        // 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作以下修改：git

{
                        // 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做为根组件。github

//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:web

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;
复制代码

打开浏览器，能够看到以下图，说明配置成功。 npm

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

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

修改文件以下：json

//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进行组合，也是我目前在研究的问题。