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，可以看到

image.png

則說明最基本的安裝已經(jīng)。

  1. 打開自定義配置yarn eject
    在create-react-app react-web-demo命令之后，官方提供了4個(gè)命令。
    分別是
    yarn start: 啟動(dòng)服務(wù)并在瀏覽器中查看。
    yarn build:build 應(yīng)用程序，可以部署發(fā)布。
    yanr eject: 打開自定義配置。
    使用IDE打開項(xiàng)目目錄，結(jié)構(gòu)不做太多說明， 如下：

    image.png

    作為最基本的配置，可以滿足大部分的開發(fā)需求，但是需要加一些自定義的配置，比如less的使用等。
    yarn eject打開自定義，不可逆。
    可以看到多了script和config目錄。

  2. 添加less支持
    首先安裝開發(fā)所需模塊

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`.
                    },

下面測(cè)試是否添加成功。
在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;

打開瀏覽器，可以看到如下圖，說明配置成功。


image.png
  1. 使用antd開發(fā)，并添加按需加載配置。
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 }]]
                        },
                    },

測(cè)試是否配置成功。
修改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

看瀏覽器界面如下則配置成功。


image.png

最后執(zhí)行npm run-script build生成app，按照提示 http://localhost:5000/ 查看瀏覽器顯示結(jié)果是否一樣，一樣則配置成功。
注意：這一步瀏覽器可能會(huì)有緩存，build之后建議清除瀏覽器緩存再查看

配置結(jié)束，關(guān)于mobx的使用，可參考另一篇文章。

接上次所說，另外一篇文章是關(guān)于RN + mobx， 部分內(nèi)容可能不合適，今天作為補(bǔ)充。

redux 和 mobx

過多的內(nèi)容這里不做敘述，請(qǐng)看下面鏈接(可以知道是什么和為什么，很短)
如何理解 Facebook 的 flux 應(yīng)用架構(gòu)？
理解 React，但不理解 Redux，該如何通俗易懂的理解 Redux？
MobX vs Redux: Comparing the Opposing Paradigms - React Conf 2017 紀(jì)要

（對(duì)于redux，請(qǐng)參看Redux 入門教程（三）：React-Redux 的用法）

mobx + mobx-react

npm install mobx
npm install mobx-react

此時(shí)可以使用mobx開發(fā)，接下來配置啟用decorators裝飾器。

yarn add babel-plugin-transform-decorators-legacy -D

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

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

這是可以用方便易懂的裝飾器進(jìn)行開發(fā)。修改文件如下：

//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數(shù)據(jù)源。

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后打開瀏覽器，看到下圖并且可以操作，配置成功。

image.png

關(guān)于mobx的其他用法可以查看官方文檔。
隨著項(xiàng)目變大，如何對(duì)mobx的store進(jìn)行組合，也是我目前在研究的問題。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 無意中看到zhangwnag大佬分享的webpack教程感覺受益匪淺，特此分享以備自己日后查看，也希望更多的人看到...
    小小字符閱讀 8,367評(píng)論 7贊 35
  • GitChat技術(shù)雜談 前言 本文較長(zhǎng)，為了節(jié)省你的閱讀時(shí)間，在文前列寫作思路如下： 什么是 webpack，它要...
    蕭玄辭閱讀 12,887評(píng)論 7贊 110
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,545評(píng)論 19贊 139
  • 最近在學(xué)習(xí) Webpack,網(wǎng)上大多數(shù)入門教程都是基于 Webpack 1.x 版本的,我學(xué)習(xí) Webpack 的...
    My_Oh_My閱讀 8,327評(píng)論 40贊 247
  • Q1. yarn build打包生成的文件直接點(diǎn)擊index.html報(bào)錯(cuò)，打不開，導(dǎo)致的問題是yarn buil...
    Ysj1111閱讀 23,304評(píng)論 3贊 11

友情鏈接更多精彩內(nèi)容