山东天成建设工程有限公司网站,推广黄冈软件必备软件,湛江网站制作推广,达内网站开发培训文章目录Node.js是什么安装查看版本入门示例NPM使用 npm 命令安装模块常见命令使用淘宝 NPM 镜像TypeScript安装入门示例从github拉取构建项目如何从零创建一个TypeScript项目规划目录结构新建项目Web App运行服务添加依赖打包使用browserify打包使用webpack打包推荐流程目录配…
文章目录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
PATHC:\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 Worldresponse.end(Hello World\n);
}).listen(8888);// 终端打印如下信息
console.log(Server running at http://127.0.0.1:8888/);以上代码我们完成了一个可以工作的 HTTP 服务器。
使用 node 命令执行以上的代码
步骤三 执行
node server.jsNPM
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 jquery3.0.0 --save使用淘宝 NPM 镜像
由于国内直接使用 npm 的官方镜像是非常慢的这里推荐使用淘宝 NPM 镜像。
淘宝 NPM 镜像是一个完整 npmjs.org 镜像你可以用此代替官方版本(只读)同步频率目前为 10分钟 一次以保证尽量与官方服务同步。
你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
$ npm install -g cnpm --registryhttps://registry.npmmirror.com这样就可以使用 cnpm 命令来安装模块了
$ cnpm install [name]更多信息可以查阅https://npmmirror.com/。 用cnpm 代替默认的npm命令 或者直接设置国内镜像
npm config set registry https://registry.npmmirror.comTypeScript
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 WorldTypeScript 转换为 JavaScript 过程如下图 从github拉取构建项目
1.Clone 存储库
git clone https://github.com/xxx.git2.安装依赖
cd project_name
npm install3.构建并运行
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 src2.进入文件夹初始化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, // 不允许隐式 anyallowJs: 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 langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title/headbodylaker/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 ./ --port8081 // 这个可以然后 哎配合 tsc -w}2.启动项目
npm run server添加依赖
Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。 类似Java的guava工具库。 npm install --save lodash
npm install --save-dev types/lodash指定版本
npm install lodash3.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 srccompiled.js/script配合terser压缩js terser ./build/laker-core.js -m -c ./build/laker-core.min.js 使用webpack打包
1.安装webpack
npm install webpack webpack-cli -D2.安装 TypeScript 加载器 ts-loader
npm install ts-loader -D3.配置 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,arrowstrue -m toplevel,keep_classnames,keep_fnames}
}
