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後打開瀏覽器，看到下圖而且能夠操做，配置成功。