React-引领未来的用户界面开发框架-读书笔记(七)

第14章 开发工具

React使用了若干的抽象层来帮助你更轻松地开发组件、推导程序状态。然而,在调试、构建及分发应用时,这样设计就会产生负面影响了。

幸运的是,我们拥有一些非常好的开发工具能在开发及构建过程中为我们提供帮助。在这里探讨这些构建工具和调试工具,它们可以让开发React程序更加高效。

Browserify

Browserify是一个JavaScript打包工具,支持浏览器中使用Node.js风格的require()方法。不需要了解太多的细节也不必不知所措,Browerify会自动将所有依赖打包到一个文件中,以支持模块在浏览器环境中使用。任何包含require语句的JavaScript文件运行Browerify都会自动打包所有的依赖项。

尽管十分强大,Browserify仅支持JavaScript文件,不像Bower、Webpack或者其他打包工具支持多种文件格式。

建立一个Browerify项目

想要让Broserify良好地运行起来,你必须初始化一个node项目,假设已经安装好了node和npm,你可以通过在终端运行下面命令来初始化一个新项目。这个命令会创建一个含有必要资源的package.json文件。

npm init
# ... answer questions as necessary to complete init
npm install --save-dev browserify reactify react uglify-js

在package.json文件的末尾增加如下构建脚本:

...
"devDependencies": {"browserify": "^5.11.2","reactify": "^0.14.0","react": "^0.11.1","uglify-js": "^2.4.15",
},
"scripts": {"build": "browserify --debug index.js > bundle.js","build-dist": "NODE_ENV=production browserify index.js | uglifyjs -m > bundle.min.js"
},
"browserify": {"transform": ["reactify"]
}

通过运行npm run build来执行默认的任务,这个命令会创建一个打包好的JavaScript文件和对应的源代码映射文件(source map)。这样的配置能够让你像引用多个独立文件那样查看错误信息和添加断点,而实际上你只引用了一个文件。同时,你也会看到原来的JSX代码而不是被编译成原生JavaScript的版本。

对于构建生产环境的代码,我们需要指明当前是生产环境。React使用了一个叫做enify的转换工具,当它和代码压缩工具如uglify一起使用时,可以移除所有调试代码和详细的错误信息。以此来提升效率并缩减文件体积。

如果你想要使用一些ES6的特性,如箭头函数或类,你可以把transform那一行改成这样:

"transform":[["reactify",{"harmony":true}]

现在你就可以写成React组件并将其打包了。

对代码做出修改

让我们创建一个名为index.js的React+JSX文件。

var React = require('react');
React.reder(<h1>Hello World</h1>, document.body);

再增加一个简单的index.html文件。

<html><head><title> React+Browserify Demo</title></head><body>This text shluld not appear in the browser<script src="bundle.js"></script></body>
</html>

现在项目结构看起来大致是这样的:

index.html
index.js
node_modules/
package.json

如果现在尝试打开index.html你会发现页面没有任何加载JavaScript,因为我们还没有打包出最终的文件。运行npm run build 命令然后再刷新该页面,这个示例程序就能成功加载了。

Watchify

你可以选择增加一个监控任务,它对开发工作大有帮助。Watchify是对Browserify的一个封装,当你改动了文件的时候,他会自动帮你重新打包。同时Watchify还是用了还缓存来加快重新打包的速度。

npm install --save-dev watchify

把下面这行添加到package.json中的scripts对象中。

"watch""watchify --debug index.js -o bundle.js"

这样就不再需要运行npm run build ,运行npmrun watch即可,它会给你带来更流畅的开发体验。

构建

现在需要简单运行一下构建命令就能将React+JSX代码打包到一个文件中共浏览器使用了:

npm run-script build

你会看到多了一个新的bundle.js,打开bundle.js你会发现文件头部有一些被压缩过的JavaScirpt代码,后续跟着的是经过JSX转换的组件代码。这个文件包含了你在index.js中需要的所有的依赖,它可以在浏览器中运行,再打开index.html你会发现一切都正常工作了。

Webpack

Webpack和Browserify很像,也会把你的JavaScript代码打包到一个文件中。此外Webpack还能:

  • 将CSS、图片以及其他资源打包到同一个包中。
  • 在打包前对文件进行预处理(less、coffee、jsx等)。
  • 根据入口文件的不同把你的包拆分成多个包。
  • 支持开发环境的特性标志位。
  • 支持模块代码“热”替换。
  • 支持异步加载

因此Webpack能够实现Browserify混合其他构建工具如gulp、grunt的功能。

Webpack是一个模块功能系统,通过增加或者替换插件来实现功能,默认情况下,它启用了一个CommonJS解释器插件。

在这里我们不会详细介绍Webpack的每一种特性,不过我们会介绍基本的功能以及让它与React一起工作需要做的配置。

Webpack与React

React帮助你开发应用程序组件。Webpack不仅帮助你打包所有的JavaScript文件,还拥有其他所有应用需要的资源。这样的设计让你能创建一个自动包含所有类型依赖的组件。由于可以自动包含所有依赖,组件也变得更加方便移植。更妙的是,随着应用不断地开发并修改,当你移除某个组件的时候,它的所有依赖也会自动被移除。这意味着不会再有未被使用的CSS或图片遗留在代码目录中。

让我们看一下React组件使怎样加载资源依赖的。

// logo.js
require('./logo.css');var React = require('react');var Logo = React.createClass({render: function () {return <img className="Logo" src={require('./logo.png')} />}
})module.exports = Logo;

我们需要一个应用的入口文件来打包这个组件。

// app.js
var React = require('react');
var Logo = require('./logo.js');React.render(<Logo/>, document.body);

现在我们需要创建一个Webpack配置文件,以通知Webpack对不同的文件类型应该使用哪种加载器。同时,还要定义应用的入口文件以及打包后文件的存放位置。

// webpack.config.js
module.exports = {// 程序的入口文件entry: './app.js',output: {// 所有打包好的资源的存放位置path: './public/build',// 使用url-loader的资源前缀publicPath: './build/',// 生成的打包文件名filename: 'bundle.js',},module: {loaders: [{// 用于匹配加载器支持的文件格式的正则表达式test : /\.(js)$/,// 要使用的加载器类型// 加载器支持通过查询字符串的方式接收参数loader: 'jsx-loader?harmony'},{test: /\.(css)$/,// 多个加载器通过“!”链接loader: 'style-loader!css-loader'},{test : /\.(png|jpg)$/,// url-loader 支持 base64 编码的行内资源loader: 'url-loader?size=8192'}]}
};

现在,你需要安装Webpack及一系列加载器。你可以选择在控制台使用npm或修改package.json来完成安装。

确保你把这些加载器安装到了本地,而不是全局(使用-g参数)。

npm install webpack react
npm install url-loader jsx-loader style-loader css-loader

当所有的准备工作完成后,运行Webpack:

// 在开发环境构建一次
webpack// 构建并生成源代码映射文件
webpack -d// 在生产环境构建,压缩、混淆代码,并移除无用代码
webpack -p// 加速增量构建,可以和其他选项一起使用
webpack --watch

调试工具

安装React DeveloperTool扩展

第15章 测试

page125~180

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/286741.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【十分钟】学会微信小游戏,攀登不止小游戏制作(IVX 快速开发教程十一)

十一、攀登不止小游戏制作 制作微信小游戏大致流程与微信小程序、Web类似&#xff0c;不同的在于是组件的使用。我们此节需要完成的小游戏需求为&#xff1a; 小球触碰矩形块会跳跃或攀爬小球触碰顶部或底部游戏结束点击屏幕将会使小球朝着该方向移动小球进行跳跃时分数会增加…

十天冲刺---Day8

站立式会议 站立式会议内容总结&#xff1a;燃尽图照片最近思考一个问题。项目是怎么进行到这一步的。算了&#xff0c;这个发在明天的冲刺总结吧。。还需继续努力&#xff0c;队友快回来快回来。。转载于:https://www.cnblogs.com/imguang/p/4965054.html

Android之去掉RecycleView和NestedScrollView边缘效果

1 问题 使用RecycleView和NestedScrollView的时候&#xff0c;滑倒顶部或者底部&#xff0c;会有边缘效果&#xff0c;就像水温波一样&#xff0c;现在需求去掉 2 解决办法 在RecycleView和NestedScrollView的xml文件里面加上如下属性即可。 android:overScrollMode"nev…

Action过滤器重构

&#xff08;注&#xff1a;本文参照 NickChapsas的Attributes get a feature long-overdue in C# 11&#xff09;今天看一个泛型特性的例子&#xff0c;这个功能在C#11才受支持。在asp.net core mvc中&#xff0c;可以给action添加filter&#xff0c;达到拦截作用&#xff0c;…

征集对Oracle的问题

两月前收到Oracle的邀请&#xff0c;10.10-16日参加在旧金山举办Oracle Open World 2009&#xff0c;旅程连上了长假。很荣幸&#xff0c;我是中国惟一入选的博客&#xff08;感谢小松and北北&#xff0c;还有小废物同学经年累月的鞭策和诱导&#xff0c;北北同学的诱导尤其受用…

一篇文学会商用可编辑问卷表单制作【iVX 十二】

公共表单 在 iVX 快速教程中&#xff0c;我们使用一个公共表单项目作为 WebApp 应用的演示说明。公共表单项目可以用于企业内部或一个问卷公共平台做问卷调查&#xff0c;用户可以自由的设置表单元素以及样式&#xff0c;并且可以手动设置表单结束下载填写问卷后的调查数据。 …

【地图学】地图投影的定义和分类

一、地图投影 1、地图投影的定义 地图投影是利用一定数学法则把地球表面的经、纬线转换到平面上的理论和方法。 2、地图投影的分类 (1)按变形性质 • 等角投影: 投影面上两微分线段的夹角与地面上的相应两线段的夹角相等,及没有角度变形的投影叫 ~ 。

React-引领未来的用户界面开发框架-读书笔记(八)

第16章 架构模式 React主要功能在于渲染HTML。可以将其看成是MVC中的V&#xff0c;它不会影响到组件中直接调用AJAX请求之类的操作&#xff1a; var TakeSurveyReact.CreateClass({getInitialData&#xff1a;function(){return{survey:null}&#xff1b;},componentDidMount:…

三)mybatis 二级缓存,整合ehcache

mybatis-config.xml <setting name"cacheEnabled" value"true" /> PersonMapper.xml <?xml version"1.0" encoding"UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http:…

confluence5.8.10的使用

之前在windows上安装了confluence5.8.10,结果有一天知什么缘故&#xff0c;数据库数据损坏&#xff0c;知识库彻底打不开了&#xff0c;所有的文档都付之东流&#xff0c;真的不是一般心痛。因此考虑将其装到linux机器上&#xff0c;因为tomcat和mysql实际上都为了linux而生的&…

Android之提示Unable to get provider com.google.android.gms.ads.MobileAdsInitProvider

1 问题 接入SDK提示错误如下 java.lang.RuntimeException: Unable to get provider com.google.android.gms.ads.MobileAdsInitProvider: java.lang.IllegalStateException: 2 解决办法 在AndroidManifest.xml文件下面配置如下 在application目录下面配置如下&#xff0c;…

RPA之PAD(Power Automate Desktop)组件开发

本文由网友蓝创精英团队投稿&#xff0c;欢迎转载、分享原文作者&#xff1a;蓝创精英团队原文链接&#xff1a;https://blog.csdn.net/i2blue/article/details/125040323其实&#xff0c;PAD&#xff0c;现在官方文档还没有对外组件式或者插件式开发接口。但是&#xff0c;有一…

【地图学】高斯-克吕格(Gauss-Kruger)投影原理、应用详解(3°带、6°带)

一、高斯克吕格投影概述 德国数学家、物理学家、天文学家高斯于19 世纪20 年代拟定,后经德国大地测量学家克吕格于1912 年对投影公式加以补充,故称为高斯-克吕格投影(Gauss-Kruger,简称GK),又名"等角横切椭圆柱投影”。中央经线和赤道投影为相互垂直的直线,其它经线…

Linux安装 微信开发者工具(deepin linux ubt)

一.环境:: deepin linux15.4.1 二.安装过程: 2.1 安装wine sudo apt-get install wine 2.2 安装nwjs-sdk 2.2.1 下载linux版nwjs-sdk wget https://dl.nwjs.io/v0.25.4/nwjs-sdk-v0.25.4-linux-x64.tar.gz 2.2.2 解压nwjs-sdk tar xvf nwjs-sdk-v0.25.4-linux-x64.tar.gz 2.2…

Python 3.6学习笔记(一)

开始之前 基础示例 Python语法基础&#xff0c;python语法比较简单&#xff0c;采用缩紧方式。 # print absolute value of a integer a 100 if a > 0:print(a) else:print(-a) 可以看到&#xff0c;注释以#开头&#xff0c;python的变量不需要任何前缀&#xff0c;行结束不…

小程序的 HelloWord 01《 程序员变现指南之 微信QQ 小程序 真的零基础开发宝典》

本系列教程是针对粉丝的变现教程&#xff0c;还不是粉丝的可以关注我并且到社区&#xff1a;https://bbs.csdn.net/topics/603436232 进行打卡&#xff0c;不是老粉的也可以获取最终的技术变现学习&#xff0c;最终还有详细的变现教程等你来。 前言 《 程序员变现指南之 微信…

octave中的一些基本操作

1.矩阵的表示&#xff1a;v [1 2 2] %表示1行3列的矩阵 v [1; 2; 2] %表示3行1列的矩阵 v [1 2; 2 3; 4 5] %3*2矩阵 size(v) % 求v的行与列 length(v) %求v的列 2.几个基本矩阵的表示&#xff1a;1&#xff09;s ones(2, 4) %2*4全1矩阵 2&#xff09;m zeros(3, 4) %3…

Docker 日志最佳实践

当运行在 docker 容器中的应用程序打印日志时&#xff0c;日志会输出到标准输出流 stdout 和标准错误流 stderr。容器日志驱动可以访问这些流&#xff0c;并将日志发送到文件、本机运行的日志收集器或远端的日志服务端点&#xff08;endpoint&#xff09;。本文将介绍选择不同的…

Android之提示A failure occurred while executing org.jetbrains.kotlin.gradle.internal.KaptExecution

1 问题 编译项目的时候提示错误如下 A failure occurred while executing org.jetbrains.kotlin.gradle.internal.KaptExecution 2 原因 有2次我写room数据库的时候都提示这个 ColumnInfo(name "isAddBookmark")var isAddBookmark falseColumnInfo(name "…

一个获取a标签传值的函数

//获取url查询参数 var getUrlParams function () {var href"",params;return function (key,url) {if(url) {href url;params null;} else if(!url && !href) href window.location;//console.log(href);if(!params) {params {};var search href.sea…