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

环境配置介绍:

一、项目结构:

生成项目后,脚手架为了“优雅”... ...隐藏了所有的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


原文链接:http://www.jianshu.com/p/5e6c620ff4d6 点击打开链接


©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页