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

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/ 查看

 

环境配置介绍：

1、项目结构：

生成项目后，脚手架为了“优雅”... ...隐藏了全部的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    / 主入口文件 /

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

2、项目配置介绍

此处须要有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：

一、命令行，在当前目录执行：

 

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

4、杂项

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