Create-React-App创建antd-mobile开发环境

时间：2021-11-09 20:08:33
 
 
 

  
  
  
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/
 
   
        build.js
 
   
        start.js
 
   
        test.js
 
   
    src/
 
   
        App.js
 
   
        index.js    / 主入口文件 /
 
   



  
  
  
以上加粗文件为主要配置文件。

  
  
  
二、项目配置介绍

  
  
  
此处需要有npm、webpack的基础知识，充电传送门：[webpack学习教程](http://www.jianshu.com/p/42e11515c10f)

  
  
  
查看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": "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：

  
  
  
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
 
  

  
  
  
安装完毕即可，现版本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 ...

  
  
  
四、杂项

  
  
  
React-Router版本

  
  
  
现在最新版本React-Router为4.x.x，与原用的2.x.x的API变化稍大（官方直接跳过了3...），如需使用2.x.x版本，可

  
  
  
 
   
npm remove react-router --save
 
  

  
  
  
然后在package.json中dependencies新增字段：

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

  
  
  
接着执行：

  
  
  
 
   
npm install
 
  

  
  
  
到这里，就算搭建完开发环境了，可以正常进行开发了。

  
  
  
END

 
 
 


作者：邱鹏城
链接：http://www.jianshu.com/p/5e6c620ff4d6
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
标签：

相关文章