搭建 JavaScript 开发环境


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

对于书写代码的环境,前面我们也有提过,书写 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
  • 3
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值