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.gitignoreconfig/paths.jspolyfillsenv.jswebpack.config.dev.jswebpack.config.prod.jspublic/index.html / 入口html文件 /scripts/build.jsstart.jstest.jssrc/App.jsindex.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
转载于:https://www.cnblogs.com/webqiand/p/7729665.html
Create-React-App创建antd-mobile开发环境相关推荐
- react快速开始(二)-使用脚手架Create React App创建react应用
文章目录 react快速开始(二)-Create React App入门 什么是Create React App 快速开始 使用IDE webstrom创建react项目 create react a ...
- create react app创建的项目运行test的时候不能解析webpack的alisa配置的问题
使用babel插件npm install babel-plugin-module-resolver,并在.babelrc文件中加入如下: {"plugins": [["m ...
- 如何使用Create React App DevOps自动化工作中所有无聊的部分
by James Y Rauhut 詹姆士·鲁豪(James Y Rauhut) 如何使用Create React App DevOps自动化工作中所有无聊的部分 (How I automate al ...
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] 本文演示了如何将 Crea ...
- 深入浅出 Create React App
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- Vite 3.0 vs. Create React App:比较和迁移指南
Create React App (CRA) 在 React 社区及其整个生态系统的发展中发挥了关键作用. 在突发奇想构建本地 React 开发环境时,它是不同技能的开发人员的首选工具. CRA 拥有 ...
- Create React App 2.0 华丽登场
贺! Create React App 2.0 在 10/02 正式发布 ?????? Create React App 是由官方所维护的开发工具,主要提供了专属于 React 开发环境的前置工作.简 ...
- Create React App proxy配置
最近又吃了没文化的亏(哭晕在洗手间≧ ﹏ ≦) 做后台管理系统的时候,需要调一个易连云打印小票的接口, 项目框架是 Create React App+typescript,后端是node.js 本媛负 ...
- Create React App从使用到Docker部署
一.介绍 Create React App 是 React 脚手架,它帮我们可以快速生成项目的工程化结构,脚手架让项目从搭建到开发再到部署,整个流程变得快速和便捷. 二.安装 Create React ...
- 【翻译】基于 Create React App路由4.0的异步组件加载(Code Splitting)
基于 Create React App路由4.0的异步组件加载 本文章是一个额外的篇章,它可以在你的React app中,帮助加快初始的加载组件时间.当然这个操作不是完全必要的,但如果你好奇的话,请随 ...
最新文章
- SQL Server select into 用法
- ssh跳板登陆太麻烦,使用expect每次自动登录 利用expect 模拟键盘动作,在闲置时间之内模拟地给个键盘响应...
- BundleFusion代码框架讲解
- 【 CodeForces - 864B】Polycarp and Letters(水题,字符串,有坑)
- js与html编码不同,js与html中unicode编码的使用
- python读取图像并相加_python给图像加上mask,并提取mask区域实例
- 【操作系统】存储器管理01-思维导图
- PADS2007pads9.2使用技巧
- Activiti7使用
- 黄山归来不看岳:《Java开发手册(黄山版)》新增 11 条规约
- UltraCompare比较文件时出现UTF8_ConvertorForMac无转换符号!
- 知网html阅读怎么复制粘贴,网页文字不能复制粘贴怎么解决 网页文字不能复制粘贴的解决办法(推荐)...
- 理解Windows操作系统的KMS与MAK密钥
- 知识产权与标准规范: 著作权法、计算机软件保护条例、商标权、不正当竞争法、招投标法、采购法、合同法
- HTML选择器的学习
- 手把手教你用Python高仿一个任务管理器
- 19年程序员薪酬报告:平均年薪超70万,40岁后普遍遭遇收入天花板
- 一个队长应该干什么?
- MyBatis的核心对象
- k8s dashboard安装
热门文章
- Python基础知识 D3
- 只在用户登陆时运行_linux 系统的7个运行级别
- BERT+CRF互联网金融新实体发现
- graphpad做饼图_走进隆江糖饼老店,探秘绿豆饼制作过程
- Improved Semantic Representations From Tree-Structured Long Short-Term Memory Networks
- loss函数之SoftMarginLoss
- VS2012下基于Glut OpenGL GL_POLYGON_STIPPLE示例程序:
- 《构建高性能Web站点》观后感
- 理工计算机系相关内容,弗吉尼亚理工大学计算机系
- rollback 最后判断成功_最后4天!这些你知道吗?