前端工程化1:小白应该知道的NodeJSNPMpackage.json脚手架是什么?
Posted 拖泥羊
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端工程化1:小白应该知道的NodeJSNPMpackage.json脚手架是什么?相关的知识,希望对你有一定的参考价值。
1、一些基本概念
1.1 js引擎是什么?
- js引擎在浏览器中用于执行js代码;
- js引擎是单线程机制,js同步代码在引擎中按照顺序一步一步执行;
1.2 V8引擎是什么?
Webkit是最初苹果公司开源的一个浏览器引擎,Safari就是基于Webkit开发的。Webkit主要由两大功能,一个是渲染html,另一个是解析javascript。后来谷歌公司在Webkit的基础上升级了JavaScript解析器,研发出来V8引擎。V8引擎就用到了Chrome、android浏览器中,后来还用到NodeJs环境用于执行服务端程序。所以现在的Chrome是基于Webkit内核并采用V8引擎的浏览器。
- V8采用了即时编译,所以能提高JavaScript运行的速度。
- V8支持多系统、多平台,例如:Chrome浏览器、NodeJS、一些移动端浏览器都采用的是 V8 引擎。
1.3 浏览器有哪5大类线程?(3/4/5线程也称为Web API):
虽然js引擎是单线程机制,但是浏览器是多进程和多线程机制(例如:一个tab页就是一个进程);而浏览器有这5大类主要的线程:
- js引擎线程 —— 用于执行js代码
- 浏览器GUI渲染线程 —— 用于渲染页面,和js引擎线程互斥
- 浏览器事件触发线程 —— 用于维护事件循环,处理事件等
- 浏览器定时器触发线程 —— 用于处理计时器倒计时,setTimeout/setInterval
- 浏览器http异步请求线程 —— 用于发起异步请求,ajax请求等
1.4 NodeJS环境是什么?
NodeJS环境是基于V8引擎开发的JavaScript运行环境,一般我们去官网下载安装包安装即可。官网:http://nodejs.cn/download/。
- NodeJS环境用于运行服务端的JavaScript应用程序,诸如网络读取、访问数据库或文件系统等功能的程序。
- NodeJS环境有一套完整的标准库来开发JavaScript应用程序,文档:http://nodejs.cn/api/。
- NodeJS应用程序序擅长处理高并发的请求(因为js事件驱动的特性)。
- NodeJS应用程序有这些常用的框架或者库:express、koa.js、egg.js、nest.js等。
- NodeJS应用程序通常使用CommonJS作为模块化开发标准。
1.5 NodeJS Cli应用是什么?
NodeJS Cli应用是在NodeJS环境运行的命令行工具,例如在命令行执行的webpack-cli、vue-cli、create-react-app等工具。我们可以将常用的脚手架或其它功能的工具封装成NodeJS Cli应用,然后在命令行直接使用。
> webpack webpack.config.js --open
1.6 如何开发自己的NodeJS Cli应用?
参考项目实例:自定义实现Nodejs Cli工具
1.7 如何在命令行执行本地Nodejs Cli项目?
未发布时以项目源码形式存在,例如项目:my-nodejs-cli
- 进入本地nodejs cli项目目录,链接到全局:
> cd my-nodejs-cli
> npm link
- 在其他项目目录执行nodejs cli项目
> cd my-project
> my-nodejs-cli
1.8 脚手架是什么?
脚手架是一些工具,利用这些工具能够更好的实现前端工程化。项目开发中,开发者会遇到以下问题:
- 前端项目开发时,通常会有多人协同开发的情况;其中涉及到例如:开发规范、公用配置、模块化等问题。
- 前端项目上线前,还会有预编译、打包、自动化构建等工作需要处理;
1.9 常用的脚手架有哪些?
- vue-cli —— 创建vue项目的工具
- create-react-app —— 创建react项目的工具
- Yeoman —— 用于创建自定义脚手架的工具
- Plop —— 用于项目中,重复创建相同类型的项目文件(例如vue中某个组件的js、css文件)
- Grunt —— 自动化构建工具
- Gulp —— 自动化构建工具
- Fis3 —— 自动化构建工具
- Webpack —— 自动化打包构建,模块化开发工具
2、npm和package.json
2.1 npm是什么?
npm是随同NodeJS一起安装的包管理工具,它能够方便管理项目所需依赖。package.json作为项目的描述文件配合npm工具使用。
2.2 yarn和npm的区别?
- yarn和npm功能基本一样;
- yarn比npm快,命令更简洁;具体参考:https://www.jianshu.com/p/254794d5e741
- npm最新版本速度也快,npm5.0之后yarn的优势不再明显
2.3 package.json是什么?
- 描述文件:package.json作为项目的描述文件配合npm工具使用,文件中通常记录了项目名称,项目版本,项目执行入口文件,项目贡献者等信息;
- 自动生成:在项目目录使用命令 npm init 对项目进行初始化。自动生成package.json。
- npm install:执行命令 npm install 会安装package.json中描述的依赖,包括开发和生产等依赖。
// package.json 文件:
{
"name": "gws",
"version": "0.0.1",
"description": "gulp 自动化工作流模块",
"main": "lib/index.js", //默认入口
"bin": { //nodejs cli应用入口
"gws": "bin/gws.js"
},
"scripts": {
"test": "echo \\"Error: no test specified\\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://gitee.com/ymcdhr/e-demo/tree/master/gulp-workflow-sample"
},
"keywords": [
"tny"
],
// npm install xxx --save
// 生产依赖
// 1、别的项目如果依赖此项目也会自动安装
// 2、通常在项目代码中引入使用,会打包到生产代码中
"dependencies": {
"bootstrap": "4.4.1",
"jquery": "3.4.1",
"popper.js": "1.16.1"
},
// npm install xxx --save-dev
// 开发依赖
// 1、别的项目如果依赖此项目不会安装
// 2、通常在构建工具代码中使用,不会打包到生产代码中
"devDependencies": {
"gulp": "^4.0.2"
},
"author": "Tony Young",
"license": "MIT"
}
2.4 package.json文件中配置项目入口
如果把当前项目作为依赖使用,默认从package.json的入口去查找执行文件;
- Web应用入口:main
- NodeJS Cli应用入口:bin
- bin执行文件后缀为js,但是文件首行要添加代码:#!/usr/bin/env node
- 如果是 Linux 或者 macOS 系统下还需要修改此文件的读写权限为 755
"main": "lib/index.js", //web 页面入口
"bin": { //nodejs cli 应用入口
"gws": "bin/gws.js"
},
//gws.js
#!/usr/bin/env node
// 如果是 Linux 或者 macOS 系统下还需要修改此文件的读写权限为 755
// 具体就是通过 chmod 755 gws.js 实现修改
2.5 package.json文件中scripts的作用是什么?(npm scripts)
在package.json中,配置"scripts"命令能够实现自动化构建;例如:
- 在命令行中执行:npm run build 就相当于在命令行执行:npx sass scss/main.scss css/style.css --watch
- npm scripts配置的命令可以组合执行;
"scripts": {
"build": "sass scss/main.scss css/style.css --watch",// npm run build 启动编译css
"serve": "browser-sync . --files \\"css/*.css\\"",// npm run serve 启动web服务
"start": "npm run build&& npm run serve"// npm run start 同时执行build、serve两个命令
},
2.6 package.json文件中dependencies和devDependencies有什么区别?
- 安装命令:
> npm install xxx --save
> npm install xxx --save-dev
- 参数说明
--save:将保存配置信息到pacjage.json的dependencies节点中。
--save-dev:将保存配置信息到pacjage.json的devDependencies节点中。 - 项目依赖:dependencies
1、别的项目如果依赖此项目也会自动安装(注意:dependencies中的依赖也可以配置成git仓库的地址,但是此仓库中一定要写好准确的入口文件;而且还需要配置git仓库的访问权限,如用户名密码。)
2、通常在项目代码中引入使用,会打包到生产代码中
"devDependencies": {
"repo": "git+ssh://git@github.com:user/repo.git#master"
},
- 开发依赖:devDependencies
1、别的项目如果依赖此项目不会自动安装
2、通常在构建工具代码中使用,不会打包到生产代码中
2.7 项目中加载依赖的几种方式
- 有些库可以在script标签中直接加载,例如:jQuery
<script type="text/javascript" src="jquery.js"></script>
- 有些库需要在项目中安装,然后在源码中引入(不同的规范加载方式不同,常用的规范有:ESModules、CommonJS、AMD等);例如:安装webpack,并在代码中加载webpack模块。
安装webpack:
> npm install webpack webpack-cli --save-dev
package.json:
"devDependencies": {
"webpack": "^5.38.1",
"webpack-cli": "^4.7.0",
},
代码中加载模块:
// CommonJS 规范的方式加载
const webpack = require(\'webpack\')
2.8 npm常用命令有哪些?
npm install name //安装模块
npm uninstall name //卸载模块
npm update name //更新模块
npm ls //查看安装的模块
npm init //在项目中引导创建一个package.json文件
npm help //查看某条命令的详细帮助
npm config //管理npm的配置路径
npm cache //管理模块的缓存
npm version //查看模块版本
npm publish //发布模块
npm link //将A目录关联到B目录,这样可以在B项目直接使用A模块
3、npm简易的自动化构建工作流
3.1 简易web服务器模块:browser-sync
启动测试web服务器,自动唤起浏览器;
安装browser-sync
> npm install browser-sync --save
运行browser-sync
> browser-sync
预执行服务: preserve,在启动npm run server之前会预执行npm run preserve
并行执行: 同时执行多个命令的工具:npm-run-all
安装npm-run-all
> npm install npm-run-all --save
运行npm-run-all,在scripts中同时执行build和serve
"start": "run-p build serve"
文件监听:
browser-sync参数--watch监听文件修改,css修改过后自动重新编译sass
browser-sync参数--file监听文件变化,browser-sync将修改过的文件自动同步到浏览器
// 结合webpack,dist目录文件变化自动刷新浏览器
"scripts": {
"dev": "webpack --config webpack.dev.js --watch",
"sync": "browser-sync dist --files \'**/*\'",
"serve": "webpack serve --config webpack.serve.js",
"build": "webpack --config webpack.prod.js"
},
4、npm源加速方案
npm在安装模块的时候使用默认的官方源地址:https://www.npmjs.com/,但是这个地址在国内不一定稳定且速度慢。我们可以将npm源地址换成淘宝镜像地址:https://registry.npm.taobao.org。国内有的公司网络管控比较严格,也可以在公司内网搭建私有源;私有源从官方源拉取模块并缓存。
可以通过以下一系列手段,提升npm安装模块的速度:
4.1 设置 npm 镜像源
# 设置为国内镜像源
npm config set registry http://registry.npm.taobao.org
# 查看当前镜像源
npm config get registry
# 恢复原来镜像源
npm config set registry http://registry.npmjs.org
4.2 设置 .npmrc 文件
虽然已设置国内镜像源, 有时候 A 包中需要下载 B 包, 这时还可能到国外站点下载 B 包
.npmrc 文件可以提供「变量」设置某些包的下载地址也为国内镜像.
windows 系统:文件位置一般为 C:/Users/Administrator(当前用户名)/.npmrc
macOS 系统:文件位置一般为用户家目录,cd回车直接切到家目录,ls -al 查看
把下面常见包地址复制到 .npmrc 中,从而提高下载成功率
sharp_binary_host = https://npm.taobao.org/mirrors/sharp
sharp_libvips_binary_host = https://npm.taobao.org/mirrors/sharp-libvips
profiler_binary_host_mirror = https://npm.taobao.org/mirrors/node-inspector/
fse_binary_host_mirror = https://npm.taobao.org/mirrors/fsevents
node_sqlite3_binary_host_mirror = https://npm.taobao.org/mirrors
sqlite3_binary_host_mirror = https://npm.taobao.org/mirrors
sqlite3_binary_site = https://npm.taobao.org/mirrors/sqlite3
sass_binary_site = https://npm.taobao.org/mirrors/node-sass
electron_mirror = https://npm.taobao.org/mirrors/electron/
puppeteer_download_host = https://npm.taobao.org/mirrors
chromedriver_cdnurl = https://npm.taobao.org/mirrors/chromedriver
operadriver_cdnurl = https://npm.taobao.org/mirrors/operadriver
phantomjs_cdnurl = https://npm.taobao.org/mirrors/phantomjs
python_mirror = https://npm.taobao.org/mirrors/python
registry = https://registry.npm.taobao.org/
disturl = https://npm.taobao.org/dist
4.3 设置 hosts 文件
有些包在国内镜像中没有及时更新, 或者根本没有.
国外站点下载不通畅多是因为在「域名 => IP」阶段受阻
我们的解决方案就是提前把「域名与IP的对应关系」准备好,放在本在 hosts 文件中
编辑 C:\\Windows\\System32\\drivers\\etc\\hosts 文件 ( 更新时间 2021-3-3 )
# GitHub520 Host Start
185.199.108.154 github.githubassets.com
140.82.113.21 central.github.com
185.199.108.133 desktop.githubusercontent.com
185.199.108.153 assets-cdn.github.com
185.199.108.133 camo.githubusercontent.com
185.199.108.133 github.map.fastly.net
199.232.69.194 github.global.ssl.fastly.net
140.82.113.3 gist.github.com
185.199.108.153 github.io
140.82.113.3 github.com
140.82.112.5 api.github.com
185.199.108.133 raw.githubusercontent.com
185.199.108.133 user-images.githubusercontent.com
185.199.108.133 favicons.githubusercontent.com
185.199.108.133 avatars5.githubusercontent.com
185.199.108.133 avatars4.githubusercontent.com
185.199.108.133 avatars3.githubusercontent.com
185.199.108.133 avatars2.githubusercontent.com
185.199.108.133 avatars1.githubusercontent.com
185.199.108.133 avatars0.githubusercontent.com
185.199.108.133 avatars.githubusercontent.com
140.82.114.9 codeload.github.com
52.216.104.59 github-cloud.s3.amazonaws.com
52.216.164.131 github-com.s3.amazonaws.com
52.216.29.28 github-production-release-asset-2e65be.s3.amazonaws.com
52.217.81.140 github-production-user-asset-6210df.s3.amazonaws.com
52.217.80.164 github-production-repository-file-5c1aeb.s3.amazonaws.com
185.199.108.153 githubstatus.com
64.71.168.201 github.community
185.199.108.133 media.githubusercontent.com
# Star me GitHub url: https://github.com/521xueweihan/GitHub520
# GitHub520 Host End
补充:里面内容不是百分百固定, 遇到报错提示 某个域名连接失败, 就到 https://ip138.com/ 查找其相应的 IP 地址, 然后把 IP地址与域名的对应信息追加到上面 hosts 文件中。
以上内容不行, 也可以参考下面网址:
https://github.com/521xueweihan/GitHub520
4.4 为什么要配置它,有啥用?
- 正常访问 http://aaa.bbb.ccc/ 计算机要向 DNS 询问对应的 IP 地址,不告诉你,你就访问不了
- 在 hosts 中设置后
- 再次访问 http://aaa.bbb.ccc/ 计算机不问了,直接通过 IP 访问
有些时候之所以访问不了,就是 DNS 不告诉你
现在咱自己记着 IP, 跳过这一步,就能访问了
4.5 最后的办法
# 安装 cnpm , 之后使用 cnpm 下载安装包
npm install -g cnpm --registry=https://registry.npm.taobao.org
5、npm publish发布模块的相关问题
当我们的工具模块或者Nodejs Cli应用写好之后,为了固化代码和方便不同的团队使用,可以将其发布到npm源上,然后通过npm install module-name --save-dev的方式使用。
5.1 npm模块如何发布?
在项目目录的命令行执行:npm publish即可
5.2 npm模块发布到那儿?
1、淘宝镜像源是只读的,publish发布不上去
2、可以发布到yarn的镜像源(和npm是同步的),也可以发布到自己的镜像源
> yarn publish --registry https://registry.yarnpkg.com/
3、发布到yarn的镜像源之后,使用淘宝镜像源时可以手动同步加快模块下载速度
6、常用的自动化构建、模块化开发工具
6.1 自动化构建工具
Grunt
- 插件完善
- 构建速度慢(每一步都有临时文件读写,步骤越多)
Gulp(请关注后续文章)
- 插件完善
- 构建速度更快(没有临时文件,基于内存实现)
- 默认支持多个任务同时执行
- 使用方式更直观易懂
Fis3
- 百度开源项目
- 大而全的构建工具,集成度高一些
6.2 模块化开发工具
Webpack(请关注后续文章)
- 准确说是模块打包工具。
特别鸣谢:拉勾教育前端高薪训练营
以上是关于前端工程化1:小白应该知道的NodeJSNPMpackage.json脚手架是什么?的主要内容,如果未能解决你的问题,请参考以下文章