热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

基于vscode的node的ES2015(ES6)运行环境搭建

基于vscode的node的ES2015(ES6)运行环境搭建用了vscode也有一段时间了,在轻量级的开发环境,它的功能是最强的。跨平台,不依赖java,.net等,UI也很现代,运行速

基于vscode的node的ES2015(ES6)运行环境搭建

用了vscode也有一段时间了,在轻量级的开发环境,它的功能是最强的。跨平台,不依赖java, .net等,UI也很现代,运行速度也相对比较快,占用内存少,平板电脑的win10都可以轻松开发。

环境说明:

  • node.js 6.9.x
  • vscode 1.11.2
  • 操作系统 win10 (win7之后的系统,安装方法应该都一样)
  • 编译插件:babel

第一步:安装node

www.nodejs.org 下载安装包 6.x,默认安装 注意:在生产环境,建议使用LTS,比较稳定,bug相对比较少。
下载后,一路默认安装就可以了

第二步:安装vscode

vscode我就不介绍了,去https://code.visualstudio.com/下载对应的安装包就可以了,写这个文章的版本是1.11.2
下载后,一路默认安装就可以了
(如果是国产软件,千万不要一路默认安装,如百****du,会给你默认安装一个全家桶,占领你的启动,瞬间让你的电脑卡成翔)

第三步:安装全局的babel

在命令提示符下,输入下面命令:

npm install babel-cli babel-eslint -g

完成后,可以输入

babel --version

可以显示babel的版本号

第四步:用npm init创建工程

如果已创建,则跳过
在控制台下,建好工程目录,如:d:\work\firstnode
然后进入该目录

d:
cd d:\work\firstnode
npm init

完成node的工程创建
为了便于管理,我们将源代码目录放在lib目录下面,或src目录,在这里我用的是lib目录
编译后可以运行的目录放在build目录下面
这样就会有两个目录

d:\work\firstnode\lib
d:\work\firstnode\build

第五步:安装编译插件

在控制台下,目录为d:\work\firstnode安装插件,输入:

npm install --save-dev babel-preset-eslatest-node6

第六步:编写.babelrc

//----------------------------------------------------------
{
"presets": ["eslatest-node6"],
"plugins": [
]
}
//---------------------------------------------------------------

第七步:用vscode编写代码

在控制台并在d:\work\firstnode下面,输入code .就可以打开当前工程
或者先启动vscode后,选择打开文件夹,选择这个目录也可以。
在vscode的左边的资源管理器,新建一个index.js放到lib目录下面

//-------------index.js--------------------------------------
console.log("hello world");
//---------------------------------------------------------------

然后在控制台下输入命令

babel lib -d build\lib

就可以看到在build\lib目录面,多了一个index.js

第八步:配置运行

用vscode选择调试,调试显示的是没有配置,然后进行配置,就会进入vscode配置lanuch.json编辑

{
// Use IntelliSense to learn about possible Node.js debug attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "启动程序",
"program": "${workspaceRoot}\\bulid\\lib\\index.js"
},
{
"type": "node",
"request": "attach",
"name": "附加到端口",
"address": "localhost",
"port": 5858
}
]
}

将program改为${workspaceRoot}\bulid\lib\index.js就可以了,然后按F5就可以运行了。
为了方便调试,修改package.json中的script,增加如下内容

"scripts": {
"build": "babel lib -d build/lib -s inline",
"babelWatch":"babel lib/**/*.js -d build -w -s inline",
"releaseBuild":"babel lib -d release/lib --no-comments --compact true --minified"
},

然后在控制台下,输入npm run build就会执行babel lib -d build/lib -s inline
这样,就完成了node的vscode环境操作

第九步:最后

  • 除了配置了build,还配置了babelWatch,这样就可以处于监视状态,只要lib目录下一有文件保存,就可以实时编译到build目录下面。-s inline则是生成sourceMap,这样,用vscode断点调试的时候,就可以正常的代码位置。
  • 另外:这个使用的插件是babel-preset-eslatest-node6,这个插件的作用是将ES2015或更ES2017的js代码编译成node 6.x支持的js代码,而不是ES5,node 6.x已经支持99%的ES2015了,这样编译后的代码变化不大。

推荐阅读
  • 本文详细介绍了如何在Linux系统上安装和配置Smokeping,以实现对网络链路质量的实时监控。通过详细的步骤和必要的依赖包安装,确保用户能够顺利完成部署并优化其网络性能监控。 ... [详细]
  • 本文详细介绍了 Dockerfile 的编写方法及其在网络配置中的应用,涵盖基础指令、镜像构建与发布流程,并深入探讨了 Docker 的默认网络、容器互联及自定义网络的实现。 ... [详细]
  • 本文深入探讨了Linux系统中网卡绑定(bonding)的七种工作模式。网卡绑定技术通过将多个物理网卡组合成一个逻辑网卡,实现网络冗余、带宽聚合和负载均衡,在生产环境中广泛应用。文章详细介绍了每种模式的特点、适用场景及配置方法。 ... [详细]
  • 本文详细介绍了macOS系统的核心组件,包括如何管理其安全特性——系统完整性保护(SIP),并探讨了不同版本的更新亮点。对于使用macOS系统的用户来说,了解这些信息有助于更好地管理和优化系统性能。 ... [详细]
  • 本文详细记录了在银河麒麟操作系统和龙芯架构上使用 Qt 5.15.2 进行项目打包时遇到的问题及解决方案,特别关注于 linuxdeployqt 工具的应用。 ... [详细]
  • 深入理解Vue.js:从入门到精通
    本文详细介绍了Vue.js的基础知识、安装方法、核心概念及实战案例,帮助开发者全面掌握这一流行的前端框架。 ... [详细]
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • 优化ListView性能
    本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]
  • 本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建,还处理了系统服务的配置和启动,确保在多种 Linux 发行版上都能顺利运行。 ... [详细]
  • DNN Community 和 Professional 版本的主要差异
    本文详细解析了 DotNetNuke (DNN) 的两种主要版本:Community 和 Professional。通过对比两者的功能和附加组件,帮助用户选择最适合其需求的版本。 ... [详细]
  • 360SRC安全应急响应:从漏洞提交到修复的全过程
    本文详细介绍了360SRC平台处理一起关键安全事件的过程,涵盖从漏洞提交、验证、排查到最终修复的各个环节。通过这一案例,展示了360在安全应急响应方面的专业能力和严谨态度。 ... [详细]
  • 从 .NET 转 Java 的自学之路:IO 流基础篇
    本文详细介绍了 Java 中的 IO 流,包括字节流和字符流的基本概念及其操作方式。探讨了如何处理不同类型的文件数据,并结合编码机制确保字符数据的正确读写。同时,文中还涵盖了装饰设计模式的应用,以及多种常见的 IO 操作实例。 ... [详细]
  • Google最新推出的嵌入AI技术的便携式相机Clips现已上架,旨在通过人工智能技术自动捕捉用户生活中值得纪念的时刻,帮助人们减少照片数量过多的问题。 ... [详细]
  • C++构造函数与初始化列表详解
    本文深入探讨了C++中构造函数的初始化列表,包括赋值与初始化的区别、初始化列表的使用规则、静态成员初始化等内容。通过实例和调试证明,详细解释了初始化列表在对象创建时的重要性。 ... [详细]
  • 本文详细介绍了如何在Python3环境中配置Appium1.4.6,并指导如何连接模拟器进行自动化测试。通过本文,您将了解从环境搭建到模拟器连接的完整流程。 ... [详细]
author-avatar
elsister789_4592
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有