react以create-react-app为基础创建项目


Posted in Javascript onMarch 14, 2018

什么是create-react-app

create-react-app是一个js库,使用它能够很方便地建立react项目,免去了建立react项目时配置webpack、调试服务器、运行脚本等麻烦,你只需要使用这个库,便可以一键完成react项目的创建初始化项目

首先,要先利用create-react-app创建一个react项目,可参考https://github.com/facebookincubator/create-react-app

注:用“[ ]”包裹的都是可自定义的内容,例如:cd [project-name],实际上可能是cd my-app,也可能是cd my-project。总之“[ ]”包裹的内容,只表示上下文里相互对应的变量。

npm install -g create-react-app 
 
create-react-app [project-name] 
cd [project-name]

运行完以上命令就已经处在新建的项目中了,此时运行npm run start和npm run build了。但是,默认所有配置是隐藏起来的,要想自定义配置,需要运行一个命令:

npm run eject

此时会提示,该命令不可逆,是否继续,输入y,这样所有配置项就都出来了。这时候也可以做一些定制化的配置了,比如:

修改build后的output位置

js / css / img等静态资源会默认输出到 build -> static 下面,其配置项在config -> webpack.config.prod.js 里。

  1. js在output属性里,大约第60行 ;
  2. css在开头的cssFilename变量声明,大约第38行;
  3. 图片等在module -> rules的loader配置里,大约第143行;

map文件由devtool属性控制,如果不想要map,注释掉就可以,大约第57行;

manifest.json在ManifestPlugin的配置里,大约294行;

基础模板在HtmlWebpackPlugin的配置里,不过可以看到,是引的  ‘./paths.js' 文件,所以要修改 config -> paths.js 里面的 appHtml 属性;

默认在build时会清空build目录,配置项是scripts -> build.js 里的 fs.emptyDirSync(paths.appBuild); 这一句,注释掉就不会把老文件删掉了(灰度发布的时候可能会用到);

不eject其他修改配置的方法

除了 npm run eject 暴露出所有配置文件外,还有其他办法修改配置,由于本文主题原因不做展开,仅给出相关链。

一个(部分人认为)比较优雅的方法,即引入 react-app-rewired 插件来实现配置覆盖。需要在根目录新建一个 config-overrides.js 文件,想配置啥就写啥(怎么又多出来一种配置。。。),还需要重写下npm start等相关命令,详情点击链接查看。

另一个可参考create-react-app的git主页上推荐的Adding a CSS Preprocessor (Sass, Less etc.) 例子。大概思路就是先安装一个node环境可编译sass的插件node-sass-chokidar,然后利用npm-run-all同时运行npm start 和 watch-css(监听sass文件的命令)。个人感觉绕了个大圈,还是再议吧。。。

react等作为全局变量不打包

为了利用cdn,我们常会在页面里引用react或其他类似库的script标签,这样在浏览器环境里就有了相应的全局变量,同时减少了js的体积。下面以react为例。

首先在config -> webpack.config.prod.js 的配置里加入如下代码:

module.exports = { 
 ... 
 externals: { 
 'react': 'React', 
 'react-dom': 'ReactDOM' 
 }, 
 ... 
}

key对应的是库的名字,value对应的是全局变量的名字。这里要注意,全局变量的名字要与代码中import的名字一致,要保证规范。

另外,此处要修改下 html-webpack-plugin 插件配置的模板文件,因为需要加入全局变量,所以加入相应的script即可。以 public -> index.html 为例:

<!DOCTYPE html> 
<html lang="en"> 
 <head> 
 <meta charset="utf-8"> 
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 <meta name="theme-color" content="#000000"> 
 <!-- 
  code here 
 --> 
 </head> 
 <body> 
 <noscript> 
  You need to enable JavaScript to run this app. 
 </noscript> 
 <div id="root"></div> 
 <!-- 
  code here 
 --> 
<!-- 新插入的两个js --> 
 <script src="http://st01.chrstatic.com/themes/chr-cdn/react/v0.14.8/react.min.js"></script> 
 <script src="http://st01.chrstatic.com/themes/chr-cdn/react/v0.14.8/react-dom.min.js"></script> 
 </body> 
</html>

问:既然浏览器里面都有了全局变量,如window.React,那么代码里面其实就不用 import React from 'react' 了,更进一步,如果连react都不用引了,那么设置externals又有什么用呢(这个地方好好缕缕,是不是这个理)?

答:如果按照上面所说,去掉import和external,build出来的文件是可以顺利的在浏览器端运行的。但是如果开发的时候是起的server,那么server端就没法分析引用了,也就没法做到热更新了,另外,对于前后端同构来说,服务端也是找不到依赖的。所以,如果你是开着静态文件的监听,并且手动刷新浏览器的话,不import和external理论上是没问题的。

安装sass或less(以sass为例)

npm install sass-loader node-sass --save-dev

或 

npm install less-loader less --save-dev

安装后修改config -> webpack.config.dev.js 和 webpack.config.prod.js,分别在css的loader配置里面修改两处:
一是 test: /\.css$/ 增加scss和sass;二是use里面最后再加个loader,直接加 "sass-loader" 就可以了,也不用配置别的了(less同)。

//test: /\.css$/ 
test: /\.(css|scss|sass)$/ 
... 
use:[ 
 { 
 ... 
 }, 
 "sass-loader" 
]

添加ant-design

安装antd及按需加载的插件babel-plugin-import,参考https://ant.design/docs/react/introduce-cn

npm install antd babel-plugin-import --save-dev

在config -> webpack.config.dev.js 和 webpack.config.prod.js 里(或者 .babelrc 文件)的babel-loader的options配置里,加入如下代码:

plugins: [ 
 ['import', { libraryName: 'antd', style: 'css' }] // `style: true` 会加载 less 文件 
]

如果启用了 style:true 那就必须是装less了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript之锁定表格栏位
Jun 29 Javascript
鼠标经过的文本框textbox变色
May 21 Javascript
JQuery记住用户名和密码的具体实现
Apr 04 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
Mar 04 Javascript
老生常谈Javascript中的原型和this指针
Oct 09 Javascript
javascript设计模式之策略模式学习笔记
Feb 15 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
Jul 18 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
Vue.js实现分页查询功能
Nov 15 Javascript
js实现点击按钮复制文本功能
Jul 20 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
Sep 07 Javascript
react项目实践之webpack-dev-serve
Sep 14 Javascript
200行代码实现blockchain 区块链实例详解
Mar 14 #Javascript
vue使用iframe嵌入网页的示例代码
Jun 09 #Javascript
JavaScript实现区块链
Mar 14 #Javascript
iview table render集成switch开关的实例
Mar 14 #Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 #Javascript
Vue.js 动态为img的src赋值方法
Mar 14 #Javascript
基于datepicker定义自己的angular时间组件的示例
Mar 14 #Javascript
You might like
PHP获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
php数组指针操作详解
2017/02/14 PHP
Windows Live的@live.com域名注册漏洞 利用代码
2006/12/27 Javascript
js中将多个语句写成一个语句的两种方法小结
2007/12/08 Javascript
js跟随滚动条滚动浮动代码
2009/12/31 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
2013/09/26 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
微信小程序开发之入门实例教程篇
2017/03/07 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
2017/08/15 Javascript
JS实现简单表格排序操作示例
2017/10/07 Javascript
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
python使用Tesseract库识别验证
2018/03/21 Python
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
Django中的ajax请求
2018/10/19 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
Keras自定义IOU方式
2020/06/10 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
opencv+pyQt5实现图片阈值编辑器/寻色块阈值利器
2020/11/13 Python
html5 canvas实现跟随鼠标旋转的箭头
2016/03/11 HTML / CSS
家用个人磨皮机:Trophy Skin
2017/03/30 全球购物
英国游戏机和游戏购物网站:365games.co.uk
2018/06/18 全球购物
矫正人员思想汇报
2014/01/08 职场文书
甜品蛋糕店创业计划书范文
2014/02/06 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
节约用水标语
2014/06/11 职场文书
党员反对四风思想汇报范文
2014/10/25 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
2015年医院创卫工作总结
2015/04/22 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书