搭建我的網站的mobile版的開發環境

image.png

之前我已經搭建過一個開發移動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/ 查看,出現如下圖:

image.png

2. 環境配置介紹:

2.1 項目結構:

生成項目后,腳手架為了“優雅”... ...隱藏了所有的webpack相關的配置文件,此時查看myapp文件夾目錄,會發現找不到任何webpack配置文件。執行以下命令:

yarn eject

再查看geekjc-antd-mobile 文件夾,可以看到完整的項目結構:

image.png

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容