文章目录
- Node.js
- 是什么
- 安装
- 查看版本
- 入门示例
- NPM
- 使用 npm 命令安装模块
- 常见命令
- 使用淘宝 NPM 镜像
- TypeScript
- 安装
- 入门示例
- 从github拉取构建项目
- 如何从零创建一个TypeScript项目
- 规划目录结构
- 新建项目
- Web App运行服务
- 添加依赖
- 打包
- 使用browserify打包
- 使用webpack打包
- 推荐流程
- 目录
- 配置
- 工具
Node.js
是什么
简单的说 Node.js 就是运行在服务端的 JavaScript。
Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台。
Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境,基于 Google 的 V8 引擎,V8 引擎执行 Javascript 的速度非常快,性能非常好。
安装
Node.js 安装包及源码下载地址为:https://nodejs.org/zh-cn/download/。
一直默认next安装即可。
输入path
命令查看环境变量
path
PATH=C:\Program Files\MySQL\MySQL Server 5.5\bin;C:\Program Files\nodejs\;
C:\Users\laker\AppData\Roaming\npm
- 包含了
nodejs
-C:\Program Files\nodejs\
- 包含了
npm
-C:\Users\laker\AppData\Roaming\npm
查看版本
# 查看node版本
node -v
v18.13.0
# 查看npm版本
npm -v
8.19.3
入门示例
在我们创建 Node.js 第一个 “Hello, World!” 应用前,让我们先了解下 Node.js 应用是由哪几部分组成的:
- 引入 required 模块:我们可以使用 require 指令来载入 Node.js 模块。
- 创建服务器:服务器可以监听客户端的请求,类似于 Apache 、Nginx 等 HTTP 服务器。
- 接收请求与响应请求 服务器很容易创建,客户端可以使用浏览器或终端发送 HTTP 请求,服务器接收请求后返回响应数据。
步骤一 引入 required 模块
var http = require("http");
步骤二 创建服务器
接下来我们使用 http.createServer() 方法创建服务器,并使用 listen 方法绑定 8888 端口。 函数通过 request, response 参数来接收和响应数据。
实例如下,在你项目的根目录下创建一个叫 server.js 的文件,并写入以下代码:
var http = require('http');http.createServer(function (request, response) {// 发送 HTTP 头部 // HTTP 状态值: 200 : OK// 内容类型: text/plainresponse.writeHead(200, {'Content-Type': 'text/plain'});// 发送响应数据 "Hello World"response.end('Hello World\n');
}).listen(8888);// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');
以上代码我们完成了一个可以工作的 HTTP 服务器。
使用 node 命令执行以上的代码:
步骤三 执行
node server.js
NPM
NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:
- 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
- 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
- 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了。同样可以通过输入 “npm -v” 来测试是否成功安装。命令如下,出现版本提示表示安装成功:
# 查看npm版本
npm -v
8.19.3
使用 npm 命令安装模块
# npm 安装 Node.js 模块语法格式如下:
$ npm install <Module Name>
# 示例 使用 npm 命令安装常用的 Node.js web框架模块 express:
$ npm install express
安装好之后,express 包就放在了工程目录下的 node_modules 目录中,因此在代码中只需要通过 require(‘express’) 的方式就好,无需指定第三方包路径。
var express = require('express');
npm 的包安装分为本地安装(local)、全局安装(global)两种,从敲的命令行来看,差别只是有没有-g而已,比如
npm install express # 本地安装
npm install express -g # 全局安装
常见命令
# 卸载 Node.js 模块
$ npm uninstall express
# 查看模块
$ npm ls -g
# 更新模块
$ npm update express
# 搜索模块
$ npm search express
# 创建模块
$ npm init
# 指定版本安装
$ npm install jquery@3.0.0 --save
使用淘宝 NPM 镜像
由于国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像。
淘宝 NPM 镜像是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。
你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
$ npm install -g cnpm --registry=https://registry.npmmirror.com
这样就可以使用 cnpm 命令来安装模块了:
$ cnpm install [name]
更多信息可以查阅:https://npmmirror.com/。
用cnpm 代替默认的npm命令
或者直接设置国内镜像:
npm config set registry https://registry.npmmirror.com
TypeScript
TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准。
TypeScript 由微软开发的自由和开源的编程语言。
TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上。
教程
- https://www.tslang.cn/docs/home.html
安装
使用国内镜像:
npm config set registry https://registry.npmmirror.com
安装 typescript:
npm install -g typescript // -g全局安装安装一次就行
验证版本号
$ tsc -v
Version 4.9.4
入门示例
新建一个 app.ts 的文件,代码如下:
var message:string = "Hello World"
console.log(message)
通常我们使用 .ts 作为 TypeScript 代码文件的扩展名。
然后执行以下命令将 TypeScript 转换为 JavaScript 代码:
tsc app.ts
这时候在当前目录下(与 app.ts 同一目录)就会生成一个 app.js 文件,代码如下:
var message:string = "Hello World"
console.log(message)
使用 node 命令来执行 app.js 文件:
$ node app.js
Hello World
TypeScript 转换为 JavaScript 过程如下图:
从github拉取构建项目
1.Clone 存储库
git clone https://github.com/xxx.git
2.安装依赖
cd <project_name>
npm install
3.构建并运行
npm run build
npm start
如何从零创建一个TypeScript项目
规划目录结构
//项目结构
demo/├─ dist├─ src/ 源码目录│ ├─ css/│ ├─ fonts/│ ├─ images/│ └─ index.ts // ts文件├─ index.html├─ package.json // node项目配置└─ tsconfig.json // typescript项目配置
npm命令示例
npm install --save-dev typescript ts-loader webpack
npm i typescript -D
npm i --save-dev @types/node
参数 i 是install的简写
- -D是–save-dev的简写,仅在开发环境才用的包,会被注册在package.json里的devDependencies里
- -S是–save的简写,会打包到生成的包里面,是发布内容的一部分,会被注册在package.json里的dependencies里
新建项目
1.创建规划的文件夹
mkdir demo
cd demo
mkdir src
2.进入文件夹,初始化npm,创建package.json
npm init
根据提示回车(不知道如何填写直接默认到底也行),这时候文件夹中会生成package.json文件。
3.进入文件夹,初始化tsc,创建tsconfig.json
npm install --save-dev typescript // 会把typescript注册在package.json里的devDependencies里
tsc --init // 初始化tsc
文件夹中会生成tsconfig.json文件。
自定义配置tsconfig.json
{"compilerOptions": {"outDir": "./dist", // 编译后的js代码存放位置"sourceMap": true, // 是否生成sourceMap(用于浏览器调试)"noImplicitAny": true, // 不允许隐式 any"allowJs": true, // 编译时允许有js文件"strict": true, //是否开启严格模式"removeComments": true, // 编译结果移除注释"esModuleInterop": true, // 支持lodash等第三方库引入时使用ES Module标准"module": "commonjs", // ts代码编译成什么模块系统"target": "es2017" // ts编译成js的标准},"compileOnSave": true, // 用于IDE保存时,是否生成编译后的文件"exclude": ["node_modules"],// 排除哪些文件不打包"include": ["src/**/*"] // ts文件所在的目录,通过终端的task,会自动监视ts代码变化输出结果到dist中
}
4.在src目录新建ts文件
在src目录中创建index.ts文件并输入以下内容
console.log('hello laker');
5.编译
在demo目录执行命令
# 编译所有
tsc
# 或者指定文件
tsc xxx.ts
# 或者监控自动编译
tsc -w
这时候文件夹中就会生成dist/index.js
6.在node环境运行
在demo目录执行命令
node ./dist/index.js
控制台输出 hello laker
。
这个时候还不能与html直接配合使用,下面会继续。
Web App运行服务
新建index.html,并引入编译后的js文件。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body>laker</body><!-- 引入自己的js --><script src="./dist/index.js"></script>
</html>
当前目录结构
lite-server 轻量级的,仅适用于开发 的 node 服务器, 它仅支持 web app, 它能够为你打开浏览器, 当你的html或是JavaScript文件变化时,它会识别到并自动帮你刷新浏览器, 还能使用套接字自动注入变化的CSS, 当路由没有被找到时,它将自动后退页面。
建议!建议!建议!
使用VSCode中的Live Server插件
安装插件之后,在
index.html
上右键open with live server
然后在demo目录窗口执行
tsc -w
,监控变更的ts文件,已达到热更新ts - js。也可以使用下面npm安装依赖的方式。
1.安装live-server
npm i -g live-server -D // 全局安装
修改package.json,增加调试脚本。
"scripts": {"mb": "tsc -w"."start": "tsc -w & live-server", // 这个不显示html页面"server": "live-server ./ --port=8081" // 这个可以,然后 哎配合 tsc -w}
2.启动项目
npm run server
添加依赖
Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。
类似Java的guava工具库。
npm install --save lodash
npm install --save-dev @types/lodash
指定版本
npm install lodash@3.0.0
卸载依赖
npm uninstall lodash
引入依赖
var _ = require('lodash');
_.countBy([6.1, 4.2, 6.3], Math.floor);
打包
使用browserify打包
Browserify是一个node.js模块,主要用于改写现有的CommonJS模块,使得浏览器端也可以使用这些模块。使用下面的命令,在全局环境下安装Browserify。
$ npm install -g browserify // 全局安装
使用Browserify,将main.js转化为浏览器可以加载的脚本compiled.js。
browserify main.js > compiled.js
# 或者
browserify main > compiled.js
# 或者
browserify main.js -o compiled.js
之所以转化后的文件叫做compiled.js,是因为该文件不仅包括了main.js,还包括了它所依赖的foo.js。两者打包在一起,保证浏览器加载时的依赖关系。
<script src="compiled.js"></script>
配合
terser
压缩js
terser ./build/laker-core.js -m -c > ./build/laker-core.min.js
使用webpack打包
1.安装webpack
npm install webpack webpack-cli -D
2.安装 TypeScript 加载器 ts-loader
npm install ts-loader -D
3.配置 webpack.config.js
const path = require('path');module.exports = {entry: './src/index.ts',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},module:{rules:[ // 添加解析规则{test: /\.tsx?$/,use: 'ts-loader',exclude: /node_modules/}]},resolve: { // 需要打包的文件后缀extensions: ['.ts', '.tsx']}
};
4.打包
webpack --config webpack.config.js
推荐流程
目录
//项目结构
demo/├─ dist 最终静态js文件,可引入html中使用├─ build 编译过程中文件├─ src/ 源码目录│ ├─ css/│ ├─ fonts/│ ├─ images/│ └─ index.ts // ts文件├─ index.html├─ package.json // node项目配置└─ tsconfig.json // typescript项目配置
配置
package.json
"scripts": {"build": "npm run clean && npm run compile && npm run browserify","clean": "shx rm -rf ./build && shx rm -rf ./dist","compile": "tsc","browserify": "shx mkdir ./dist && browserify ./build/index.js > ./dist/laker.js"},"devDependencies": {"@types/node": "^18.0.3","browserify": "^17.0.0","mkdirp": "^1.0.4","shx": "^0.3.4","terser": "^5.14.1","typescript": "^4.7.4"}
tsconfig.json
{"compilerOptions": {"target": "ES2017","module": "CommonJS","strict": true,"moduleResolution": "node","declaration": true,"noUnusedLocals": true,"noUnusedParameters": false,"forceConsistentCasingInFileNames": true,"noFallthroughCasesInSwitch": true,"noImplicitReturns": true,"skipLibCheck": true,"esModuleInterop": true,"outDir": "./build","types": []},"compileOnSave": true,"include": ["src/**/*"]
}
工具
- shx:一个包装 ShellJS Unix 命令的包装器,为 npm 包脚本中简单的类 Unix
跨平台命令
提供了一个简单的解决方案。
npm install shx --save-devpackage.json:
{"scripts": {"clean": "shx rm -rf build dist && shx echo Done"}
}
- browserify: 一个node.js模块,主要用于改写现有的CommonJS模块,使得浏览器端也可以使用这些模块。
npm install browserify --save-devpackage.json:
{"scripts": {"browserify": "browserify ./build/index.js > ./dist/laker.js"}
}
- terser: 提供了压缩 js 代码的方式,可以移除无用代码、替换变量名等,减少编译后文件体积,提升加载速度。
npm install terser --save-devpackage.json:
{"scripts": {"mini": "terser ./dist/laker.js -o ./dist/laker.min.js -c arguments,arrows=true -m toplevel,keep_classnames,keep_fnames"}
}