Create-React-App建立antd-mobile開發環境

時間 2019-11-21

標籤 create react app 建立 antd mobile 開發環境欄目 React 简体版

原文原文鏈接

Facebook 官方推出Create-React-App腳手架，基本能夠零配置搭建基於webpack的React開發環境，內置了熱更新等功能。css

詳細文檔可前往連接：Create-React-App文檔html

本文將介紹使用Create-React-App腳手架搭建antd-mobile的開發環境。node

快速開始：

    npm install -g create-react-app       /* 安裝create-react-app，建議使用cnpm */

    create-react-app myapp                 /* 使用命令建立應用，myapp爲項目名稱 */

    cd myapp                                        /* 進入目錄，而後啓動 */

    npm start

按以上執行，便可快速建立React開發環境。react

打開http://localhost:3000/ 查看webpack

環境配置介紹：

1、項目結構：

生成項目後，腳手架爲了「優雅」... ...隱藏了全部的webpack相關的配置文件，此時查看myapp文件夾目錄，會發現找不到任何webpack配置文件。執行如下命令：git

npm run eject

再查看myapp 文件夾，能夠看到完整的項目結構：github

    myapp/

        node_modules/

        package.json

        .gitignore

        config/

            paths.js

            polyfills

            env.js

            webpack.config.dev.js

            webpack.config.prod.js

        public/

            index.html   / 入口html文件 /

        scripts/

            build.js

            start.js

            test.js

        src/

            App.js

            index.js    / 主入口文件 /

以上加粗文件爲主要配置文件。web

2、項目配置介紹

此處須要有npm、webpack的基礎知識，充電傳送門：[webpack學習教程](http://www.jianshu.com/p/42e11515c10f)npm

查看package.json文件的scripts，json

    "scripts": {

        "start": "node scripts/start.js",

        "build": "node scripts/build.js",

        "test": "node scripts/test.js --env=jsdom"

    },

可知，運行時是直接執行scripts文件目錄下的js文件。

其中*start.js*爲開發環境，*build.js*爲打包腳本。

開發環境，代理請求

查看start.js, Facebook基本爲每項配置都寫了詳盡的註釋，

start.js腳本啓動了dev-server, 這裏須要瞭解的是

function addMiddleware(devServer){

        ... ...

        這個函數調用http-proxy-middleware模塊，將代理請求，代理地址在package.json中添加

    }

在package.json中添加字段proxy，開發環境下dev-server將會自動轉發請求：

"proxy": "http://aaa.bbb.com"

SASS、LESS等CSS預處理器配置

Facebook官方在create-react-app升級到某一版本，忽然丟掉了默認對sass、less等預處理器的支持，官方文檔說明

因而，只能本身動手，在config目錄下，webpack.config.dev.js 和 webpack.config.prod.js文件，沒有抽出 loader、postcss之類通常共用的配置，因而，在兩個文件夾都要一塊兒配置，也能夠抽出共用部分，以便維護。

這裏以webpack.config.dev.js舉例，webpack.config.prod.js同樣配置便可：

SASS-loader：

一、命令行，在當前目錄執行：

npm install sass-loader node-sass --save-dev

二、找到webpack.config.dev.js文件中 loaders中的第一項exclude（值爲數組），排除scss文件，不然將被'url-loader'捕獲。

    {

    exclude: [

        /\.html$/,

        /\.(js|jsx)(\?.*)?$/,

        /\.css$/,

        /\.json$/,

        /\.svg$/,

        /\.scss$/     ....新增項!

    ]

三、loaders新增一項：

    {

        test: /\.scss$/,

        loader: 'style!css!postcss!sass?outputStyle=expanded'

    },

至此，SASS文件就能夠正常打包了（此處針對SCSS文件，如用到SASS，可將SCSS的正則修改下），LESS文件相似，再也不贅述。

3、antd-mobile的引入及配置

在命令行執行：

npm install antd-mobile --save

安裝完畢便可，現版本1.0.6

移動端高清方案

因0.8之後的版本引入移動端高清方案，所以須要在webpack等增長相應配置，**必須配置！**，官方說明

按官方說明配置便可。

按需引入

爲減小打包後體積以及方便書寫，可用babel-plugin-import插件，配置後引入模塊可以下：

import {Picker} from 'antd-mobile';

自動引入CSS和JS，無需再引入整個antd-mobile的整個CSS文件

使用以下：

命令行執行：

npm install babel-plugin-import --save-dev

安裝完畢後，在根目錄新建文件，命名: .babelrc.js

    {

      "presets": [

        "es2015",

        "react"

      ],

      "plugins": [

        [

          "import",

            {

              "libraryName": "antd-mobile",

              "style": "css"

            }

          ]

        ]

    }

在文件內輸入以上內容，爲babel的配置。

而後！！！最重要的一步，把package.json中的babel配置給刪掉，尤爲是：react-app！！！

webpack.config.dev.js和webpack.config.prod.js中，都須要爲resolve的extensions新增一項'.web.js'

antd-mobile的web版的文件後綴爲.web.js ...