前端工程化（一）
一、commonjs和esmodule
（一）、commonjs
1、概述
Node 应用由模块组成，采用 CommonJS 模块规范。
每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。
CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。使用require加载模块。
2、module对象
Node内部提供一个Module构建函数。所有模块都是Module的实例。
每个模块内部，都有一个module对象，代表当前模块。它有以下属性。
module.id模块的识别符，通常是带有绝对路径的模块文件名。
module.filename模块的文件名，带有绝对路径。
module.loaded返回一个布尔值，表示模块是否已经完成加载。
module.parent返回一个对象，表示调用该模块的模块。
module.children返回一个数组，表示该模块要用到的其他模块。
module.exports表示模块对外输出的值。
如果在命令行下调用某个模块，比如node xxx.js，那么module.parent就是null。如果是在脚本之中调用，比如require('./xxx.js')，那么module.parent就是调用它的模块
2.1 module.exports属性
module.exports属性表示当前模块对外输出的接口，其他文件加载该模块，实际上就是读取module.exports变量。
Node为每个模块提供一个exports变量，指向module.exports。这等同在每个模块头部，有一行这样的命令。
var exports = module.exports;
module.exports.x = 4
module.exports.fn = function () {
console.log('module.exports')
}
// 下面写法等同于上面的写法
exports.x = 4
exports.fn = function () {
console.log('module.exports')
}
3.require命令
require命令的基本功能是，读入并执行一个JavaScript文件，然后返回该模块的exports对象。如果没有发现指定模块，会报错。
4.模块的加载机制
CommonJS模块的加载机制是，输入的是被输出的值的拷贝。也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。
（二）、esmodule
- 直接导出定义的变量
a.js
export const name = 'alice'
export const age = 16
b.js
import { name, age } from "./a.js";
console.log(name, age) // alice 16
- 先定义变量，再使用
export一起导出
a.js
const name = 'alice'
const age = 16
export { name, age }
b.js
import * as obj from "./a.js";
console.log(obj.name, obj.age) // alice 16
- 给导出的变量取别名
a.js
const name = 'alice'
const age = 16
export { name as myName, age as myAge }
b.js
import { myName as aliceName, myAge } from "./a.js";
console.log(aliceName, myAge) // alice 16
- 默认导出，默认导出在一个js文件中只允许存在一个，默认导出可以不用定义变量名，在导入的时候可以随意起名，并且导入的时候不需要加 {}
a.js
export default function(){
return 'hello world'
}
b.js
import foo from './a.js'
console.log(foo()) // hello world
⭐️ 想要在浏览器端使用 es module ，首先在 html 当中引入 js 文件的时候，就需要将script标签中的type设置为module
index.html
<script src="b.js" type="module"></script>
二、git、svn
(一)、git
(二)、svn
是一个开放源代码的版本控制系统，通过采用分支管理系统的高效管理
**repository（源代码库）😗*源代码统一存放的地方
**Checkout（提取）😗*当你手上没有源代码的时候，你需要从repository checkout一份
**Commit（提交）😗*当你已经修改了代码，你就需要Commit到repository
**Update (更新)😗*当你已经Checkout了一份源代码， Update一下你就可以和Repository上的源代码同步，你手上的代码就会有最新的变更
三、npm
1、安装npm
nodejs已经集成了npm
2、查看版本
npm -v
3、使用淘宝镜像
npm config set registry https://registry.npm.taobao.org
// cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
4、使用 npm 命令安装模块
npm install xxx
// 安装指定版本
npm install xxx@2.1.1
// 项目运行所依赖的模块
npm install xxx --save or npm install xxx -S
// 项目开发所需要的模块
npm install xxx --save-dev or npm install xxx -D
5、全局安装和本地安装
npm install xxx # 本地安装
npm install xxx -g # 全局安装
本地安装
将安装包放在
./node_modules下（运行npm命令时所在的目录），如果没有node_modules目录，会在当前执行 npm 命令的目录下生成node_modules目录。可以通过
require()来引入本地安装的包。
全局安装
将安装包放在你 node 的安装目录。
可以直接在命令行里使用。
6、pageage.json
- 初始化
npm init
- 属性说明
name - 包名，并且必须是小写字母和一个单词，并且可以包含连字符和下划线。（必填）
version - 包的版本号。（必填）
description - 包的描述。
scripts - 脚本
homepage - 包的官网 url 。
author - 包的作者姓名。
contributors - 包的其他贡献者姓名。
repository - 包代码存放的地方的类型，可以是 git 或 svn，git 可在 Github 上。
main - main 字段指定了程序的主入口文件，require('moduleName') 就会加载这个文件。这个字段的默认值是模块根目录下面的 index.js。
keywords - 关键字
dependencies - 项目运行所依赖的模块，是生产环境所使用的，如果没有安装可能会导致报错，如
jq
devDependencies - 项目开发所需要的模块。开发阶段使用的，代码提交线上时，不需要这些工具，如
webpack、gulp
注意： dependencies和devDependencies是一个对象。该对象的各个成员，分别由模块名和对应的版本要求组成，表示依赖的模块及其版本范围。对应的版本可以加上各种限定，主要有以下几种：
指定版本：比如
1.2.2，遵循“大版本.次要版本.小版本”的格式规定，安装时只安装指定版本。
波浪号（tilde）+指定版本：比如
~1.2.2，表示安装1.2.x的最新版本（不低于1.2.2），但是不安装1.3.x，也就是说安装时不改变大版本号和次要版本号。
插入号（caret）+指定版本：比如ˆ1.2.2，表示安装1.x.x的最新版本（不低于1.2.2），但是不安装2.x.x，也就是说安装时不改变大版本号。需要注意的是，如果大版本号为0，则插入号的行为与波浪号相同，这是因为此时处于开发阶段，即使是次要版本号变动，也可能带来程序的不兼容。
latest：安装最新版本。
{
"devDependencies": {
"axios": "1.2.1",
"browserify": "~1.2.2",
"ant-design-vue": "^1.2.2",
}
}
7、卸载模块
npm uninstall xxx
录制文件：https://meeting.tencent.com/v2/cloud-record/share?id=1a1717f7-1552-4c26-88e7-cf536ed244a6&from=3