位置: 编程技术 - 正文

详解如何在NodeJS项目中优雅的使用ES6(node怎么用)

编辑:rootadmin

推荐整理分享详解如何在NodeJS项目中优雅的使用ES6(node怎么用),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:nodejs使用视频教程,node.js使用教程,nodejs xhr,详解如何在家孵化小鸭,nodejs使用视频教程,nodejs使用视频教程,nodejs使用视频教程,详解如何在家孵化小鸭,内容如对您有帮助,希望把文章链接给更多的朋友!

NodeJs最近的版本都开始支持ES6(ES)的新特性了,设置已经支持了async/await这样的更高级的特性。只是在使用的时候需要在node后面加上参数:--harmony。但是,即使如此node也还是没有支持全部的ES6特性。所以这个时候就需要用到Babel了。

项目地址: stage-0包含了async/await相关的插件: babel-plugin-syntax-async-functions、babel-plugin-transform-regenerator。

这样还是不能在项目中使用es7的async/await了。还需要更多的配置,有两种方法可以达到目的:

1.使用babel-polyfill。有一个不好地地方,babel-polyfill会污染global对象,所以不适合于library之类的使用。仅适合于web app使用。

2.使用babel运行时转码工具,transform-runtime插件。使用这个方法正好弥补了上面的方法的不足之处。它是尤其适合于library一类的项目使用。

分别介绍这两种方法。

安装babel-polyfill:

之后,在你的项目的入口文件的最上方引入babel-polyfill。比如我现在有一个Express的Web App,那么的入口文件就是开启这个app的index.js文件。在这个文件的最上方引入polyfill,require('babel-polyfill')。或者你的入口文件已经是ES的写法了,那么就直接import,import 'babel-polyfill'。

使用transform-runtime也非常简单。安装:

另外还需要安装babel-runtime:

之后在.babelrc文件中添加如下的配置,两个二选其一即可:

剩下的就是欢畅的使用async/await了。

另外如果要使用Object.assing这样的方法的话,也可以使用插件:babel-plugin-transform-object-assign,如果要使用解构赋值可以使用插件:babel-plugin-transform-object-rest-spread。当然这些都包含在了stage-0这个preset中。

现在就开始写ES的代码吧。在项目中安装ExpressJs,创建一个index.js文件。我们来试着创建一个小小的web app作为练习:

运行命令:

使用命令*babel-node**就可以让代码运行起来,后面的参数指定了在转义js代码的时候使用的preset和plugin。

Babel官方推荐的方法是时候用.babelrc文件,这一方式可以更加灵活。在项目的更目录上创建.babelrc文件,在里面添加你安装的preset和plugin的描述:

这样可以直接使用babel-node来执行代码,或者使用命令babel来转义代码。如:

babel命令会从配置文件中读取配置,来变异code/目录下的文件,并把转义之后的JavaScript文件导出到build/目录下。还有命令行里的参数-w,这个命令参数指定的是watch,每次code目录的文件修改后都会触发babel命令的再次执行。

在文件中使用Source Maps

上面看起来很不错了。但是还有一个问题,在你调试代码的时候,你调试的实际是babel命令转码之后的js,不是原来你编写的源代码所在的文件。调试的不是源文件,多少会有些不便。比如下面的文件会抛出一个异常:

在转码命令中加一个--source-maps可以解决这个问题:

babel code/ -d build/ --source-maps

最后在package.json里添加scripts节点:

接下来:

Gulp出场

上文讲述了如何使用Babel实现ESx的开发。但是在正式的开发中,上面的这些配置还略显不足,尤其是你的项目包括web端、server端,尤其web端不仅处理ESx的代码还需要处理。所以需要Gulp出场。

这玩意儿看起来很复杂,你定义了编译的过程。其实掌握了以后很好用,尤其是可以自动处理很多东西,节约大把时间。要使用Gulp,必须先安装NodeJS。这个基本是标配。然后你会用到它的命令行工具。

安装Gulp

在最新发布的Gulp里有一点调整。gulp-cli从gulp分离出来作为单独的一部分使用。所以,如果你已经安装过gulp之前的版本需要先删除:

安装gulp-cli

在--dev模式下安装gulp

创建gulp配置文件

就像Babel要用.babelrc作为配置文件一样,gulp也需要一个配置文件。这个配置文件就是gulpfile.js, 但是和babel同用的情况下把gulpfile.js重命名为gulp.babel.js:

详解如何在NodeJS项目中优雅的使用ES6(node怎么用)

gulp的使用还是很简单的,主要就是在gulpfile.babel.js文件中添加各种task。在这些task中一定要添加一个叫做default的task,gulp命令的执行起点就是从这里开始。

假设有这么一个场景:

1.使用eslint检查代码,发现代码风格和潜在的错误。

2.自动实现ESx -> ES5的代码转码,并把转码后的代码放在指定目录下。

3.在转码的时候添加sourcemaps。

以上这些“任务”都是用gulp自动实现。该如何配置呢?

gulp和eslint

要在gulp中使用各种请他的类似于eslint这样的功能的时候需要使用在gulp上的对应的插件。没错,gulp的设计思路和gulp基本一样:插件机制。

那么我们就需要首先下载eslint的插件:

在开始编写我们的第一个task之前, 做最后的准备工作。首先需要配置.eslintrc文件。eslint会根据这个文件定义的规则检查代码的风格。我们不准备大批的配置规则,这样非常耗时间而且也照顾不到很多我们项目已经保留下来的编码风格。所以,airbnb的一套规则拿来使用时最好的办法。

安装eslint

然后你可以运行命令来初始化配置:./node_modules/.bin/eslint --init。你也可以忽略这个命令,直接创建一个.eslintrc的文件。

安装eslint的airbnb扩展

要使用airbnb的一套规则就需要安装他们的eslint扩展:

命令执行之后会提示有些依赖项没有安装,分别是eslint-plugin-import@^2.2.0、eslint-plugin-import@^2.2.0、eslint-plugin-jsx-ay@^3.0.2。依次安装这些依赖项就好。

.eslintrc

env指定环境是支持es6的,rules指定的是一些补充内容,比如字符串使用单引号还是双引号等。这个是根据个人喜好配置的,你可以选择添加你需要的规则。最后是extends,这里配置airbnb就用上了airbnb的一套eslint编码检查规则。

gulp-eslint插件用起来

引入相关模块之后开始写任务:

如前文所述,default任务是必须:

跳转到项目的目录下,运行gulp命令。会得到如下的输出:

gulp和babel

这次同时处理babel和sourcemaps的问题。

首先安装插件:

import gulp-babel插件:

添加任务:

修改default任务:

javascript gulp.task('default', ['lint', 'babel-sourcemaps'], () => { console.log('gulp default task!') })

如果你不想用sourcemaps的话,可以这么写:

javascript gulp.task('babel', () => { return gulp.src(paramConfig.source) .pipe(babel()) .pipe(gulp.dest(paramConfig.dest)) })

把gulp放在npm命令体系下

babel老早就配置好了,现在和配置好了gulp。gulp每次输入命令基本上就是手动执行。现在应该让这个命令半自动执行了。

修改package.json文件,在其中添加scripts节点:

如此一来,很多的命令都可以像gulp一样放在npm的scripts里执行。比如,现在可以在命令行李输入如下命令来实现lint和babel转码:

开始执行:

总结

使用bebel可以提前使用最新的JavaScript语言特性,这样编写很多代码的时候会变得简洁高效。并且babel转码之后生成的代码也是非常规范的ES5写法,同时是在严格模式下的。所以,我们在写ESx代码的时候不需要再添加'use strict';标识。

使用gulp又可以使很多不大不小但是很费时间的事自动处理。

把这两者结合在一起会让你的项目开发效率提升很多。所以,看到这里你不觉得你应该赶快在项目里使用这些技术,让开发进入快车道吗!!!???

标签: node怎么用

本文链接地址:https://www.jiuchutong.com/biancheng/379416.html 转载请保留说明!

上一篇:利用n工具轻松管理Node.js的版本(如何利用工具人)

下一篇:在node中如何使用 ES6(node的使用)

  • 以前年度损益调整在利润表中怎么填
  • 一般纳税人公司抵扣
  • 增值税发票9个点和13个点区别
  • 季度企业所得税可以不预缴吗
  • 分公司独立核算企业所得税缴纳
  • 已缴企业所得税公司账户的钱怎么办
  • 收取车辆使用费怎么做账
  • 发票失控怎么处罚
  • 缴纳城建税会计分录怎么做账
  • 应收账款贷方余额怎么处理
  • 发票未能在汇算清缴前取得怎么办?
  • 公司注册成功以后会有什么费用
  • 私车公用保险费用公司承担吗
  • 代扣代缴的增值税
  • 关于小规模纳税人的说法错误的有
  • 去年盈利今年亏损怎么表达
  • 新契税法还有优惠吗?
  • 研发费用费用化金额和资本化金额有什么区别
  • 面对通过网络涌入的大量信息,我们应该学会
  • 快速迅雷
  • 企业合并中或有负债确认后期调整的项目
  • 进项税转出包括哪些
  • 销售商品发生的现金折扣
  • 权益净利率是什么意思啊
  • msconfig配置文件
  • 商会收到的会费要交企业所得税
  • 股权转让的条件和方式
  • 最早的拍照手机是哪一年
  • php array_pop函数
  • 职工教育经费列支范围规定
  • 个体户要交哪些税怎么交
  • 计算机网络拓扑结构有哪些
  • 业务招待费用列支范围
  • css如何应用
  • read命令功能
  • 经营租赁业务会计账务处理
  • 支付工资会计
  • 企业利润分配的账务处理
  • php用户评论
  • mysql有几种基本数据类型
  • python send_from_directory
  • 股东转股怎么办理
  • 企业付给个人工资怎么算
  • 房地产老项目简易计税方法
  • 生育津贴的支付期限表述不正确的是
  • 增值税不用计提吗
  • 公司用卫生纸是干什么的
  • 服务业暂估成本怎样做账?
  • 无形资产处置的相关费用计入哪里
  • 工程施工科目下可以设置咨询费吗
  • 公司给材料商付款表格
  • 长期待摊销费用属于
  • 收到工程进度款怎么做分录
  • 哪些情况不属于农户
  • 公司的钱转入余额账户
  • 美容行业如何做好管理工作
  • 报关单新版
  • u盘装机大师手机下载电脑版
  • mac桌面日历 记事本
  • workflow software
  • windows7字体安装方法
  • 开源镜像是什么意思
  • xp系统做完了进不去
  • url是什么文件怎么打开
  • win7系统ie浏览器在哪里
  • 使用nodejs中httpProxy代理时候出现404异常的解决方法
  • unity3d怎么用
  • linux批量修改文件时间
  • 圆形图表分析怎么做
  • 批处理 /a
  • shell操作oracle数据库
  • 在Unity中使用事件/委托机制(event/delegate)进行GameObject之间的通信
  • 吉林省国家税务局官网
  • 成都市税务局公示名单公布
  • 我们要什么行政执法监督机制和能力建设严格落实行政
  • 百望税控盘电子发票开好了如何打印及导出发票
  • 深圳税务服务大厅电话
  • 境外付款需要什么手续
  • 小规模纳税人租赁房屋税率
  • 朝阳银行作息时间
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设