搭建 JavaScript 开发环境

  • 安装过程 Node.js
  • 第一个 JavaScript 程序
  • NPM 简单介绍

搭建环境,无外乎就是书写代码的环境以及运行代码的环境。

对于书写代码的环境,前面我们也有提过,书写 JavaScript 代码使用记事本都能够书写,但是,使用工具的话可以让我们书写代码的速度更快,事半功倍。
书写代码的工具可以分为两大类:文本型代码编辑器以及集成开发环境(IDE)
常见的文本型代码编辑器如下:

  • 记事本
  • Sublime
  • Atom
  • Brackets
  • VScode

常见的集成开发环境如下:

  • Dreamwaver
  • Webstrom

接下来是代码运行环境。最早的时候,JavaScript 一般都是在浏览器上面运行,但是自从 Node.js 出现以后,JavaScript 已经有了服务器端的运行环境,并且随着 ECMAScript 6 的发布,JavaScript 已经成为了一种通用编程语言,所以刚开始的时候,我们完全可以在 Node 里面运行 JavaScript 代码。

安装过程 Node.js

在 Windows 和 Mac 上面都可以很轻松的安装 Node.js,只需要访问:https://nodejs.org/en/
点击 Download 链接,下载相应的安装包,然后进行安装即可。
安装好以后,可以在控制台里面通过node -v命令查看当前安装的 Node.js 的版本:

User:~ Jie$ node -v
v8.7.0

还有一种方式是使用在线的运行环境,这里推荐https://www.es6console.com/该网站可以让我们在线的书写 JavaScript 代码,并且在线的运行立即看到效果。

第一个 JavaScript 程序

书写代码的方式非常简单,可以通过控制台下面,输入node进入 REPL(Read Eval Print Loop) 模式。即输入-求值-输出循环的模式。在该模式下可以进入一个即时求值的运行环境,对于测试简单的代码这个环境是非常有用的,示例如下:

User:~ Jie$ node
> console.log("Hello World");
Hello World
undefined

无论是 Windows 系统还是 Mac 系统,我们都可以通过Ctrl+d键的组合来退出 REPL 模式。

除了通过上面所介绍的 REPL 模式来运行 JavaScript 代码,我们也可以自己新建一个以js为后缀的文本文件,将书写好 JavaScript 代码放在 Node 里面运行。

这里我在我的桌面上新建了一个1.js的文件,书写如下的代码:

console.log("Hello World!!");

在 Node 里面运行的步骤,首先cd切换到desktop路径下面,然后输入node 文件名即可运行:

> User:~ Jie$ cd desktop
User:desktop Jie$ node 1
Hello World

NPM 简单介绍

NPM 全称 Node Package Manager,翻译成中文就是 Node 包管理工具。不过实际上,NPM 具备2种含义,一个是指代由 Node.js 官方提供的包管理和分发工具。另外还可以指代管理各种各样代码包的 NPM 官网。

很多开发人员会将自己写好的功能代码打包上传到 NPM 官网上,而我们可以使用 NPM 工具很轻松的从官网上下载我们所需要的包来使用,为我们书写代码带来便捷。

在现在的 Node.js 版本中(Node.js 0.6开始),NPM 已经包含在安装包里面了,我们在 Windows 或者 Mac 上安装 Node.js 时会自动安装 NPM。

在使用 NPM 的时候,由于有些资源被屏蔽或者是国外资源的原因,经常会导致用 NPM 安装依赖包的时候失败,所以我们可以安装 NPM 的国内镜像:CNPM。

使用 CNPM 来代替 NPM,它的同步频率目前为10分钟一次,以保证尽量与官方服务同步。

CNPM 的安装方法如下:

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装好以后我们可以对项目根目录进行初始化,初始化指令如下:

// 项目初始化
npm init

初始化 NPM 之后,我们可以安装一些常用的模块,当然这属于 Node.js 的内容,这里我们仅仅安装一个常用的输入模块,如下:

// 安装输入模块
npm install readline-sync

接下来在书写代码的时候,就可以引入这个输入模块,从而在控制台进行输入了,如下:

const readline = require("readline-sync");
console.log("请输入一点东西:");
let i = readline.question(""); // 接收用户输入的内容
console.log("你输入的是:",i);

效果:

User:desktop Jie$ node 1
请输入一点东西:
this is a test
你输入的是: this is a test

搭建 JavaScript 开发环境相关推荐

  1. 图解ArcGIS API for JavaScript开发环境搭建

    ESRI公司截止到目前已经发布了最新的ArcGIS Server for JavaScript API v3.9,它提供了更为丰富而又强大的功能. 本篇经验向大家介绍其本地部署及简单的第一个地图应用程 ...

  2. react安装_「React实战」三分钟搭建React开发环境

    其实16年的时候就已经接触到React,那个时候也只是入门,时隔多年,工作上一直都没有接触到相关的业务,不知不觉,前端的天也开始渐变,看到 了很多招聘要求上都是要求会React,三大框架怎么也得熟悉使 ...

  3. Visual Studio Code搭建TypeScript开发环境

    转载 http://www.cnblogs.com/sunjie9606/p/5945540.html 使用Visual Studio Code搭建TypeScript开发环境 1.TypeScrip ...

  4. nodejs mac java home_Mac上搭建nodejs开发环境

    ###Mac上搭建nodejs开发环境 ####安装homebrew 1 2 3ruby -e "$(curl -fsSL https://raw.githubusercontent.com ...

  5. 使用Visual Studio Code + Node.js搭建TypeScript开发环境

    Visual Studio Code搭建Typescript开发环境 -- 相关文章: http://www.cnblogs.com/sunjie9606/p/5945540.html [注意:这里仅 ...

  6. 使用Visual Studio Code搭建TypeScript开发环境

    使用Visual Studio Code搭建TypeScript开发环境 1.TypeScript是干什么的 ? TypeScript是由微软Anders Hejlsberg(安德斯·海尔斯伯格,也是 ...

  7. 【java开发】快速搭建java开发环境(离线开发、在线开发)

    文章目录 1.简介 2.下载和安装jdk 2.2 下载jdk 2.2 配置环境变量 2.3 常见命令 3.jdk开发 3.1 测试代码(hello world) 3.2 测试代码(animal, do ...

  8. 基于 Webpack 4 搭建 Vue 开发环境

    自从工作之后,就已经很久没有写过博客了.时间被分割得比较碎,积累了一段时间的学习成果,才写下了这篇博客. 之前有写过 Webpack4 的文章,但是都比较偏入门,唯一的一篇实战篇 -- 基于Webpa ...

  9. vscode搭建vue开发环境(vue入门)

    本文基于vue2.0版本,文末说明怎么升级为vue3.0版本 一.安装VScode 从官网下载,安装就行.以下操作在win+r -> cmd 命令行界面执行.在vscode中就是在创建好的项目空 ...

最新文章

  1. ASP.NET MVC Identity 兩個多個連接字符串問題解決一例
  2. Linux之Vsftpd虚拟用户、扩展应用tcp_wrapper实验总结
  3. 浅谈图片蒙版效果-webkit-mask
  4. day 58 关于bootstrap
  5. 由浅入深剖析硬盘固件
  6. 从零开始搭建一个简单的ui自动化测试框架02(pytest+selenium+allure)
  7. win7如何关闭密码保护共享
  8. 五种方法,教你如何在Mac上查看文件完整路径
  9. 猜数字小c语言游戏课程任务书,C语言课程设计猜数字游戏姚成.doc
  10. Webpower中国区正式推出邮件编辑利器——Smart editor!
  11. mysql索引失效的常见9种原因详解
  12. python矩阵计算器心得_NumPy入门攻略:手把手带你玩转这款强大的数据分析和计算工具...
  13. python自动登录qq邮箱_python实现自动登录qq邮箱,写邮件并发送
  14. 微信小程序 修改radio样式
  15. vue项目查看脚手架版本报错
  16. c++ 线程进度条_AMD R9 5900X 跑分曝光,单线程性能大幅提升;天猫“官宣”苹果iPhone 12:暗示10月16日开启预定...
  17. 中位数/平均数/众数/方差/标准差
  18. 斯诺克台球游戏HTML5
  19. 好记性不如烂笔头之 App widgets(一)
  20. Android开发:adb调试显示adb.e unknown command device解决方法

热门文章

  1. [网络安全自学篇] 十七.Python攻防之构建Web目录扫描器及ip代理池(四)
  2. 阿里社招一面(Java)
  3. R数据分析:生存分析的做法和结果解释
  4. c语言循环的嵌套案例,C语言嵌套循环
  5. 如何在Linux环境下用虚拟机跑Windows!
  6. Ubuntu 16.04 安装SAMtools
  7. 合并两个List集合
  8. ARIS流程图复原,态崩溃了,竟然出彩了
  9. 连续变量的全概率和贝叶斯公式_什么时候用全概率公式和贝叶斯公式
  10. 【2020-10-16】知网专利信息爬虫