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

到这里,就算搭建完开发环境了,可以正常进行开发了。

大部分参考 :简书 邱鹏城, 如有转载请@出处

时间: 2024-11-13 20:30:00

Create-React-App创建antd-mobile开发环境(学习中的记录)的相关文章

React漫漫学习路之 利用Create React App命令创建一个React应用

所谓万事开头难,本文旨在为初探React的同学,建立第一个最基本的react应用. Create React App是Facebook官方的一个快速构建新的 React 单页面应用的脚手架工具,它可以帮你配置开发环境,以便你可以使用最新的 JavaScript 特性,还能提供很棒的开发体验,并为生产环境优化你的应用.(如果你使用过vue-cli构建vue应用,那么此处可类比) 话不多说,直接开始. 安装 全局安装create-react-app npm install -g create-rea

安卓开发环境(for mac)搭建记录

下载并解压安卓SDK(带Eclipse)和NDK 运行Eclipse 选择菜单ADT->Preferences->Android->NDK->Browse 选择之前解压的NDK目录 点击OK 右键Package Exploder空白处->Import->Android->Existing Android Code Into Workspace 点击Next 点击Browse 选择cocos2d的Android示例项目 右键Package Explorer里的Sim

2014.8.12-AKKA和Actor model 分布式开发环境学习小结

学习使用AKKA 断断续续有一年了.目前还是习惯用java来写akka下面的程序.对于原生的scala还是没有时间和兴趣去学习它. 毕竟学习一门语言需要兴趣和时间的. AKKA学习资源还是不算丰富. 看过最多的就是官方的编程手册,还有就是AKKA Essentials 这两本.  自己动手写的程序还不算多,也放在github上面. 另外,在akka编译配置.升级版本上,以及部署多台服务器组建akka cluster 方面花费了不少时间.因为项目需要,上周重新在办公室用两台mac台式机和一台thi

【10.2.3】ArcGIS Runtime for Android搭建开发环境过程中问题详解

一.Visual Studio Ultimate2012安装过程问题 1.问题描述 安装完成后,您将看到一条消息,指示安装程序已完成,但并不是所有的功能具有已正确安装,以及以下警告消息: Microsoft Web Deploy 3.0 所需的证书不在有效期内根据当前系统时钟或签名文件中的时间戳验证时. 2.解决方案 修改电脑系统时间为2013年7月,断网后重新安装,成功后再联网. Visual Studio Ultimate2012激活密钥:RBCXF-CVBGR-382MK-DFHJ4-C6

react 基础语法复习1- 搭建开发环境

之前有看过阮一峰老师的react教程跟着做了一遍,学习了一下.好久没看,有点忘记了,这次跟着脚手架工具系统的复习一遍.顺便学习学习 react-router 和 redux 首先,脚手架工具我使用的是create-react-app ,这个是官方出的,感觉比较靠谱.不过真实使用起来感觉比vue-cli复杂,webpack配置文件都在node_modules文件夹里面,找了好久,并且开发环境和生产环境有分开配置了. 全局安装 脚手架工具 cnpm i -g create-react-app //

android开发环境搭建中容易遇到的问题和疑惑

1.JDK是向下兼容的,JDK安装高版本,eclipse.ADT.SDK安装低本版本是可以的. 2.eclipse的版本与ADT.SDK的版本必须是匹配的.无论是低版本的eclipse安装高版本的ADT还是,高版本的eclipse安装低版本的ADT,在安装过程中都会出现conflict而导致不能安装,即使安装过程能够顺利通过,也属于安装不成功,因为在打开eclipse后,eclipse界面当中没有AVD安装成功后应出现的一组功能按钮,如图: 这几个按钮时AVD安装成功的标志. 3.如果eclip

创建 Web 前端开发环境

Web 前端开发涉及多种工具,这里将常用工具的安装和配置进行说明,提供了详细的说明,为后继的开发创建一个坚实的基础. 本文介绍的工具有:NodeJS, NPM, Bower, Git 和 Grunt. 1. 安装 NodeJS 和 NPM 一切从 NodeJS 开始吧,官方网址:https://nodejs.org/ NodeJS 既可以为我们提供一个服务器端的 Web 环境,又可以提供一个命令行的工具,既然做 Web 前端开发,那就是我们必然选择的工具了. 为了解决包管理的问题,NodeJS

[React] {svg, css module, sass} support in Create React App 2.0

create-react-app version 2.0 added a lot of new features. One of the new features is added the svgr webpack loader to wrap SVGs in React components as a named export. This let’s you either grab the filename from the default export or grab a wrapped S

create react app遇到的问题

我现在想的是吧 static 资源和动态 api 来分开处理, static 资源开启 nginx 服务器,api 请求由 express 完成, 现在的问题是开发的时候 proxy 设定将所有的请求都代理到了 express 的端口,甚至于 <a></a> 元素的链接也被代理到 express 的端口了,在这个页面根本获取不到 nginx 提供的资源.