热门标签 | 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了,这样编译后的代码变化不大。

推荐阅读
  • 本文介绍了 Vue 开发的入门指南,重点讲解了开发环境的配置与项目的基本搭建。推荐使用 WebStorm 作为 IDE,其下载地址为 。安装时请选择适合您操作系统的版本,并通过 获取激活码。WebStorm 是前端开发者的理想选择,提供了丰富的功能和强大的代码编辑能力。 ... [详细]
  • CentOS 7环境下Jenkins的安装与前后端应用部署详解
    CentOS 7环境下Jenkins的安装与前后端应用部署详解 ... [详细]
  • 根据不同环境需求,利用 Vue CLI 的 `npm run build` 命令对项目进行定制化打包,如测试、预发布和生产环境。通过配置 `process.env` 变量,实现不同环境下接口和服务的动态切换,确保应用在各阶段都能高效运行和调试。 ... [详细]
  • 解决针织难题:R语言编程技巧与常见错误分析 ... [详细]
  • 在本地环境中部署了两个不同版本的 Flink 集群,分别为 1.9.1 和 1.9.2。近期在尝试启动 1.9.1 版本的 Flink 任务时,遇到了 TaskExecutor 启动失败的问题。尽管 TaskManager 日志显示正常,但任务仍无法成功启动。经过详细分析,发现该问题是由 Kafka 版本不兼容引起的。通过调整 Kafka 客户端配置并升级相关依赖,最终成功解决了这一故障。 ... [详细]
  • Squaretest:自动生成功能测试代码的高效插件
    本文将介绍一款名为Squaretest的高效插件,该工具能够自动生成功能测试代码。使用这款插件的主要原因是公司近期加强了代码质量的管控,对各项目进行了严格的单元测试评估。Squaretest不仅提高了测试代码的生成效率,还显著提升了代码的质量和可靠性。 ... [详细]
  • Android中将独立SO库封装进JAR包并实现SO库的加载与调用
    在Android开发中,将独立的SO库封装进JAR包并实现其加载与调用是一个常见的需求。本文详细介绍了如何将SO库嵌入到JAR包中,并确保在外部应用调用该JAR包时能够正确加载和使用这些SO库。通过这种方式,开发者可以更方便地管理和分发包含原生代码的库文件,提高开发效率和代码复用性。文章还探讨了常见的问题及其解决方案,帮助开发者避免在实际应用中遇到的坑。 ... [详细]
  • 掌握PHP编程必备知识与技巧——全面教程在当今的PHP开发中,了解并运用最新的技术和最佳实践至关重要。本教程将详细介绍PHP编程的核心知识与实用技巧。首先,确保你正在使用PHP 5.3或更高版本,最好是最新版本,以充分利用其性能优化和新特性。此外,我们还将探讨代码结构、安全性和性能优化等方面的内容,帮助你成为一名更高效的PHP开发者。 ... [详细]
  • 利用 Vue CLI 脚手架在 Visual Studio Code 中创建 Vue 项目
    本文介绍了如何在 Visual Studio Code 中使用 Vue CLI 脚手架创建 Vue 项目。首先,确保已安装 Node.js 和 npm,因为 Vue CLI 的安装依赖于 npm。可以通过在命令行中输入 `npm -v` 来检查 npm 是否已成功安装。接下来,我们将详细说明 Vue CLI 的安装步骤及其在 Visual Studio Code 中的应用。 ... [详细]
  • 基于Node.js的高性能实时消息推送系统通过集成Socket.IO和Express框架,实现了高效的高并发消息转发功能。该系统能够支持大量用户同时在线,并确保消息的实时性和可靠性,适用于需要即时通信的应用场景。 ... [详细]
  • 在进行网络编程时,准确获取本地主机的IP地址是一项基本但重要的任务。Winsock作为20世纪90年代初由Microsoft与多家公司共同制定的Windows平台网络编程接口,为开发者提供了一套高效且易用的工具。通过Winsock,开发者可以轻松实现网络通信功能,并准确获取本地主机的IP地址,从而确保应用程序在网络环境中的稳定运行。此外,了解Winsock的工作原理及其API函数的使用方法,有助于提高开发效率和代码质量。 ... [详细]
  • 结语 | 《探索二进制世界:软件安全与逆向分析》读书笔记:深入理解二进制代码的逆向工程方法
    结语 | 《探索二进制世界:软件安全与逆向分析》读书笔记:深入理解二进制代码的逆向工程方法 ... [详细]
  • 【前端开发】深入探讨 RequireJS 与性能优化策略
    随着前端技术的迅速发展,RequireJS虽然不再像以往那样吸引关注,但其在模块化加载方面的优势仍然值得深入探讨。本文将详细介绍RequireJS的基本概念及其作为模块加载工具的核心功能,并重点分析其性能优化策略,帮助开发者更好地理解和应用这一工具,提升前端项目的加载速度和整体性能。 ... [详细]
  • JVM参数设置与命令行工具详解
    JVM参数配置与命令行工具的深入解析旨在优化系统性能,通过合理设置JVM参数,确保在高吞吐量的前提下,有效减少垃圾回收(GC)的频率,进而降低系统停顿时间,提升服务的稳定性和响应速度。此外,本文还将详细介绍常用的JVM命令行工具,帮助开发者更好地监控和调优JVM运行状态。 ... [详细]
  • 本章节深入探讨了 Webpack 命令的高级功能,涵盖了官方快速入门教程中未涉及的细节。通过实际操作和案例分析,对官方文档进行了详细解读与补充,帮助读者更好地理解和应用这些进阶技巧。 ... [详细]
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社区 版权所有