(参考别人结合自己的整理得出,若有错误请大神指出)
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/ <b>build.js</b> /*打包命令配置文件*/ <b>start.js</b> /*启动命令配置文件*/ test.js src/ App.js index.js /* 主入口文件 */
二、项目配置介绍
放上webpack 、npm 的充电传送门: 【webpack学习教程】
查看package.json文件的scripts,
"scripts": { "start": "node scripts/start.js", "build": "node scripts/build.js", },
可知,运行时是直接执行scripts文件目录下的js文件。
其中*start.js*为开发环境,*build.js*为打包脚本。
build.js 此处打包 生成的 文件 路径引用有问题
解决方法在另外一片文章中react.js - 基于create-react-app的打包后文件根路径修改
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
移动端高清方案
因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版本,可先卸载router,执行命令
pm remove react-router --save
然后在package.json中dependencies新增字段:
"react-router": "^2.0.0 < 3.0.0",
接着执行:
npm install
到这里,就算搭建完开发环境了,可以正常进行开发了。
大部分参考 :简书 邱鹏城, 如有转载请@出处