[JavaScript知识库]前端工程化

目的：通过各种技术，提高开发效率

CommonJS和ESM

• cjs模块输出的是值的拷贝，esm输出的是值的引用
• cjs是运行时加载，esm是编译时加载
• cjs是同步加载，esm是异步加载

commonjs模块无论加载多少次，只会在第一次加载时运行一次，以后再加载就返回第一次运行的结果

体积优化：Tree shaking

为了减小生产环境体积，可以使用有些支持ESM的package，如lodash-es代替lodash

体积优化：Minify

1、取出多余字符：空格、换行和注释
2、压缩变量名
3、合并声明和布尔值简化

const a =2
const b=3

const a=2,b=3

!b&&!c
//转化为
!(b||c)

4、编译预计算

const y=365*24*60*60
//压缩后
const y=31536000

function hello(){console.log(1)}
hello()

//压缩后
console.log(1)

如何将commonjs转化成esm

module.exports指向的是一个空对象

exports.a=3
module.exports.b=4
//{a：3，b:4}

module.exports={b:4}
//{b:4}

exports的转化

exports.a=3

//既要转化为默认导出，又要转化为具名导出
export const a=3
export default {a}


//
module.exports=()=>{}
exports.a=1
exports.b=2

//转化为
const sum=()=>{}
sum.a=1
sum.b=2
export const a=1
export const b=2
export deault = sum

CommonJS To ESM的构建工具：@rollup/plugin-commonjs

如何原生地使用ESM？

<script type='module'>
	import vue from  'vue'
</script>

包开发：第三方包需要锁定版本号吗？

需要，第三方库如果间接依赖于一个包并且锁定了包的版本号，当我们导入时如果间接依赖包有更新的版本，那么就会发生间接依赖不可控的问题。

解决办法：
1、在package.json中将版本进行锁死
2、将部分依赖直接编译后直接引入，而非通过依赖的方式，如webpack、babel

总结：
1、第三方库的devDependencies必须锁定
2、第三方库的dependencies虽然可能存在不可控的问题，但是可通过锁死依赖的方式解决

package-lock.json有什么作用？

可以用于锁定版本号，可以保证开发环境与生产环境的一致性，防止报错

如何发布一个包？

在package.json中填写以下字段

{
	name:'@Vkfform',
	version:'1.0.0',
	main:'./index.js'
}

之后执行npm publish发包

//增加一个修复版本1.0.1 -> 1.0.2
npm version patch

//增加一个小的版本号 1.0.1->1.1.1
npm version minor

//增加一个大的版本号
npm version major

实际发包内容，一般需要将构建后资源进行发包，源文件可发可不发

{
	files:['dist']
}

npm script的生命周期

npm echo时，会触发pre和post

"scripts":{
	"echo":"echo hello",
	"preecho":"echo hello",
	"postecho":"echo hello",
}

npm publish会自动执行以下脚本：

• prepublishOnly
• prepack
• prepare：npm install之后执行 和npm publish之前执行
• postpack
• publish
• postpublish

如果需要在发包之前做一些事情，可以在prepublishOnly中完成：

{
	prepublishOnly:"npm run test && npm run build"
}

确定node版本号

在package.json中的engines字段中指定node版本号:

{
	"engines":{
		"node":">=16.0.0"
	}
}

devDependencies和dependencies的区别

devDependencies不会下载到node_modules目录中

package.json中main/module/browser/exports字段有何区别

main为npm package的commonjs入口文件
module为es module的入口
exports控制访问路径

{
	exports:{
		'@': './index.js',
		'src': '@/src'
	}
}

什么是semver？

semver三部分组成：major、minor（新增向后兼容的功能）、patch（修复向后兼容的bug）

~1.2.3：版本号范围为>=1.2.3并且<1.3.0
^1.2.3：版本号范围为>=1.2.3并且<2.0.0

如何提升webpack构建资源的速度

（1）使用babel转化js变为swc

module:{
	rules:{
		test:/.m?js$/,
		exclude:/(node_modules)/,
		use:{
			laoder:"swc-loader"	
		}
	}

}

（2）持久化缓存
再次编译时无需再次进行解析AST

cache:{
	type:"filesystem"
}

（3）多进程
在解析AST时开启多进程，提升编译速度

module.exports={
	module:{
		rules:{
			test:/\.js$/,
			use:[
			{
				loader:"thread=loader",
				options:{
					workers:8,	
				}	
			},
			"babel-loader"
			]	
		}
	}
}

打包器如何加载style资源

css-loader处理css中的url和@import，并将其视为模块引入
style-loader将样式注入到DOM中

module：{
	rules:[
		{
			test:/\.css/,
			use:['style-loader','css-loader']	
		}	
	]
}