之前我已經搭建過一個開發移動web的react開發環境,在那時我就已經想把我的極客教程弄一個手機上體驗好的web app,無奈公司業務太多,整天忙著趕項目,下班回去的時候疲憊不堪,已經沒有更多的精力放在自己的項目上。現在有點時間了,趕緊做點自己的項目。
俗話說,磨刀不誤砍柴工。先花了一點時間搭建了一下開發環境,這里記錄一下過程及遇到的坑。之前搭建的環境由于webpack 還是 1 ,但現在的版本都升至3.多了,所以腳手架上果斷選擇react官網出的create-react-app,ui上選擇螞蟻金服的 antd-mobile
1. 快速開始:
npm install -g create-react-app /* 安裝create-react-app,建議使用cnpm */
create-react-app geekjc-antd-mobile /* 使用命令創建應用,myapp為項目名稱 */
cd geekjc-antd-mobile /* 進入目錄,然后啟動 */
npm start
注意
:這里不提倡用faceback的yarn包管理器,因為筆者一開始用的是yarn,但是項目總是運行不起來^ _ ^ 但后面安裝其它需要的包的時候可以用下yarn 安裝
按以上執行,即可快速創建React開發環境。
打開http://localhost:3000/ 查看,出現如下圖:
2. 環境配置介紹:
2.1 項目結構:
生成項目后,腳手架為了“優雅”... ...隱藏了所有的webpack相關的配置文件,此時查看myapp文件夾目錄,會發現找不到任何webpack配置文件。執行以下命令:
yarn eject
再查看geekjc-antd-mobile 文件夾,可以看到完整的項目結構:
2.2 項目配置介紹
此處需要有npm、webpack的基礎知識,充電傳送門:Webpack——解決疑惑,讓你明白 此篇文章是基于webpack 1.x 版本的,升級2.x版的可以看
查看package.json文件的scripts,
"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": "https://www.geekjc.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一樣配置即可:
LESS-loader:
1、命令行,在當前目錄執行:
npm install less-loader --save-dev
2、找到webpack.config.dev.js文件中 loaders中的加入(值為數組),排除less文件,否則將被'url-loader'捕獲。
{
loader: require.resolve('file-loader'),
exclude: [/\.js$/, /\.html$/, /\.json$/,/\.svg$/, /\.less$/],
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
3、loaders新增一項:
{
test: /\.less$/,
use: [
require.resolve('style-loader'),
require.resolve('css-loader'),
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
plugins: () => [
pxtorem({
rootValue: 100,
propWhiteList: [],
}),
autoprefixer({
browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 8', 'iOS >= 8', 'Android >= 4'],
}),
],
},
},
{
loader: require.resolve('less-loader'),
options: {
modifyVars: { "@primary-color": "#1DA57A" },
},
},
],
},
至此,LESS文件就可以正常打包了,SCSS文件類似,不再贅述。
3. antd-mobile的引入及配置
在命令行執行:
npm install antd-mobile --save
3.1 移動端高清方案
因0.8以后的版本引入移動端高清方案,因此需要在webpack等增加相應配置,必須配置!,官方說明
按官方說明配置即可。
3.2 按需引入
為減少打包后體積以及方便書寫,可用babel-plugin-import插件,配置后引入模塊可如下:
import { Button } from 'antd-mobile';
自動引入CSS和JS,無需再引入整個antd-mobile的整個CSS文件
使用如下:
命令行執行:
npm install babel-plugin-import --save-dev
安裝完畢后,在webpack.config.dev.js按如下配置:
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
plugins: [
['import', { libraryName: 'antd-mobile', style: true }],
],
// 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,
},
},
4. 補充
用create-react--app 結合 antd-mobile有兩種構建方式
具體可以查看在 create-react(-native)-app 中使用
注意查看升級指南,里面很詳細了。
5. 完
至此,一個移動web開發環境就搭建完了 ,如果搭建過程遇到困難的可以查看本項目,項目地址:geekjc-antd-mobile