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/ <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
到这里,就算搭建完开发环境了,可以正常进行开发了。
大部分参考 :简书 邱鹏城, 如有转载请@出处
Create-React-App创建antd-mobile开发环境(学习中的记录)的更多相关文章
- create react app 项目部署在Spring(Tomcat)项目中
网上看了许多,大多数都是nginx做成静态项目,但是这样局限性太多,与Web项目相比许多服务端想做的验证都很麻烦,于是开始了艰难的探索之路,终于在不经意间试出来了,一把辛酸... 正常的打包就不说了. ...
- 如何扩展 Create React App 的 Webpack 配置
如何扩展 Create React App 的 Webpack 配置 原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...
- 深入 Create React App 核心概念
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...
- 从零开始,创建GitHub团队开发环境
从零开始,创建GitHub团队开发环境 GitHub提供免费的团队环境,不过免费仓库容量是300MB,请大家注意. 申请GitHub个人账号 1. 使用浏览器访问GitHub主页.如果使用IE,尽量不 ...
- tap news:week5 0.0 create react app
参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...
- 使用create react app教程
This project was bootstrapped with Create React App. Below you will find some information on how to ...
- ubuntu下创建虚拟python3开发环境
友情链接:ubuntu16.04下安装python3+创建虚拟python3开发环境 1.为什么要创建python3虚拟开发环境? /********************************* ...
- VMware下Debian开发环境部署之常见问题记录
本文讲介绍windows作为宿主机,linux虚拟机作为编译环境的开发环境搭建中最常用到的三个问题,详细描述了解决过程. 目录: 1.网路配置: 2.分辨率设置: 3.共享网盘设置: 1.网络设置,V ...
随机推荐
- 一:Spring Boot、Spring Cloud
上次写了一篇文章叫Spring Cloud在国内中小型公司能用起来吗?介绍了Spring Cloud是否能在中小公司使用起来,这篇文章是它的姊妹篇.其实我们在这条路上已经走了一年多,从16年初到现在. ...
- [ASP.NET Core 2.0 前方速报]Core 2.0.3 已经支持引用第三方程序集了
发现问题 在将 FineUIMvc(支持ASP.NET MVC 5.2.3)升级到 ASP.NET Core 2.0 的过程中,我们发现一个奇怪的现象: 通过项目引用 FineUICore 工程一切正 ...
- spring @Autowired和jdk的@Resource区别
当一个接口只有一个实例时,使用这两个注解的效果是一样的. 当含有两个实例时,非得使用 @Autowired 那么定义的引用类型必须和service实现类定义的名字相同,参照下图 定义第一个servic ...
- Openstack的打包方法
使用setup.cfg和setup.py进行管理 1.setup.py文件内容 # THIS FILE IS MANAGED BY THE GLOBAL REQUIREMENTS REPO - DO ...
- 自动化之路 python psutil模块 收集硬件信息
一.psutil模块 1. psutil是一个跨平台库,能够轻松实现获取系统运行的进程和系统利用率(包括CPU.内存.磁盘.网络等)信息.它主要应用于系统监控,分析和限制系统资源及进程的管理.它实现了 ...
- vim编辑器介绍及其常用命令
vim简单的介绍 Vim 编辑器是一个模式编辑器 . 这意味着在不同状态下编辑器有不同的行为模式 . 两个基本的模式是 Normal 模式和 Insert 模式 ,还有可视模式. 在 Normal 模 ...
- 一步一步教你用c# entity framework6 连接 sqlite 实现增删改查
使用entity framework6 连接 SQLite 数据库 前言 很多小型应用程序中,都要使用数据库,而现在比较流行的本地数据库非SQLite莫属. 第一步:前期准备 开发环境:vs2015 ...
- RocketMQ快速入门
前面几篇文章介绍了为什么选择RocketMQ,以及与kafka的一些对比: 阿里 RocketMQ 优势对比,方便大家对于RocketMQ有一个简单的整体了解,之后介绍了:MQ 应用场景,让我们知道M ...
- Gitlab自动触发Jenkins构建打包
一.目的 在部门的测试环境中,开发人员一旦向gitlab仓库提交成功代码,gitlab就会自动触发jenkins构建项目.当然在构建后还可以添加项目部署或者自动化测试的脚本.这里只针对测试环境. 二. ...
- C++ UTF8和GB2312相互转换
#include <Windows.h> #include <string> using std::string; void UTF8_to_GB2312(const char ...