Create-React-App建立antd-mobile開發環境(學習中的記錄)

標籤：lin   script   連結   路徑   方便   找不到   str   src   cal   

(參考別人結合自己的整理得出,若有錯誤請大神指出)

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

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

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

快速開始：

npm install -g create-react-app       /* 安裝create-react-app，建議使用cnpm */create-react-app myapp                 /* 使用命令建立應用，myapp為項目名稱 */cd myapp                                        /* 進入目錄，然後啟動 */npm start                                    /*啟動運行*/

按以上執行，即可快速建立一個React開發環境。

會自動開啟預設瀏覽器 http://localhost:3000/ 

 

環境配置介紹：一、項目結構：

產生項目後，腳手架為了“優雅”... ...隱藏了所有的webpack相關的設定檔，此時查看myapp檔案夾目錄，會發現找不到任何webpack設定檔。執行以下命令：

npm run eject

查看myapp 檔案夾，可以看到完整的項目結構：

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/        <b>build.js</b>    /*打包命令設定檔*/        <b>start.js</b>    /*啟動命令設定檔*/        test.js    src/        App.js        index.js    /* 主入口檔案 */

 

二、項目配置介紹

 

放上webpack  、npm   的充電傳送門： 【webpack學習教程】

查看package.json檔案的scripts，

"scripts": {    "start": "node scripts/start.js",    "build": "node scripts/build.js",},

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

其中*start.js*為開發環境，*build.js*為打包指令碼。

build.js    此處打包 產生的 檔案 路徑引用有問題

解決方案在另外一片文章中react.js - 基於create-react-app的打包後檔案根路徑修改

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：

1、命令列，在目前的目錄執行：

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

2、找到webpack.config.dev.js檔案中 loaders中的第一項exclude（值為數組），排除scss檔案，否則將被‘url-loader‘捕獲。

{exclude: [    /\.html$/,    /\.(js|jsx)(\?.*)?$/,    /\.css$/,    /\.json$/,    /\.svg$/,    /\.scss$/     ....新增項!]

3、loaders新增一項：

{    test: /\.scss$/,    loader: ‘style!css!postcss!sass?outputStyle=expanded‘},

至此，SASS檔案就可以正常打包了（此處針對SCSS檔案，如用到SASS，可將SCSS的正則修改下），LESS檔案類似，不再贅述。

三、antd-mobile的引入及配置

在命令列執行：

npm install antd-mobile --save

移動端高清方案

因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 ...

四、雜項React-Router版本

現在最新版本React-Router為4.x.x，與原用的2.x.x的API變化稍大（官方直接跳過了3...），如需使用2.x.x版本，可先卸載router,執行命令

pm remove react-router --save

然後在package.json中dependencies新增欄位：

"react-router": "^2.0.0 < 3.0.0",

接著執行：

npm install

到這裡，就算搭建完開發環境了，可以正常進行開發了。

 

 

 

大部分參考 :簡書 邱鵬城, 如有轉載請@出處

Create-React-App建立antd-mobile開發環境(學習中的記錄)