前端开发环境搭建

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 应用是由哪几部分组成的：

1. 引入 required 模块：我们可以使用 require 指令来载入 Node.js 模块。
2. 创建服务器：服务器可以监听客户端的请求，类似于 Apache 、Nginx 等 HTTP 服务器。
3. 接收请求与响应请求 服务器很容易创建，客户端可以使用浏览器或终端发送 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"}
}