Fork me on GitHub

框架原理与进阶

发表于 | 更新于: | 分类于 ，
字数统计: 1,215 | 阅读时长 ≈ 5

前端工程化工具

模块化

关于模块化

模块化是一种将系统分离成独立功能部分的方法，可将系统分割成独立的功能部分，严格定义模块接口、模块间具有透明性。

优点

  1. 灵活架构，焦点分离
  2. 方便模块间组合、分解
  3. 方便单个模块功能调试、升级
  4. 多人协作互不干扰

发展历程

  1. script标签
  2. ComonJS
  3. AMD
  4. CMD
  5. UMD
  6. ES6

工具

Webpack

https://webpack.js.org

基本概念:

1
Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

优势:

1
2
3
4
5
1、代码拆分
2、Loader
3、智能解析
4、插件系统
5、快速运行

实战之基本演练:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
打包单个js文件
	1、新建一个项目的入口文件entry.js并且在里面写好内容
	
	2、一定要切换到项目根目录，使用 
		webpack entry.js bundle.js
		
	3、在项目根目录，创建index.html，导入bundle.js文件
	
	4、运行
    
打包具有依赖关系的两个js文件
	1、新建两个文件 entry.js module.js ，并且在里面写好导出
	导入的代码
	
	2、一定要切换到项目根目录，使用 
		webpack entry.js bundle.js
		
	3、在项目根目录，创建index.html，导入bundle.js文件
	
	4、运行
    
 打包非js(以后css)文件
	1、新建一个site.css文件，里面写上内容
	
	2、一定要切换到项目根目录，使用 
		webpack entry.js bundle.js
		
	3、我们需要安装两个load来打包css文件
		npm i style-loader css-loader -D
		
	4、使用style-loader & css-loader 来打包css文件
		4.1、再导入css的时候，使用style-loader css-loader
		4.2、在终端里面对css结尾的文件统一处理
        
 webpack.config.js的使用
	作用:简化在终端里面输入的很长的打包指令

	1、项目根目录下创建webpack.config.js
	
	2、在webpack.config.js中配置
		entry
		output
		loader

github案例

实战之和VueJS结合使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
webpack + vue 构建项目【实现热更新，看到Hello Vue】

#### 新建基本的文件和文件夹
	1、创建一个项目的根目录
		szhmqd18
			|--src 项目的源代码目录
				|--main.js 项目的入口文件
				|--App.vue 根组件【项目启动之后看到的第一个组件】
			|--package.json 项目配置文件
				npm init -y
			|--webpack.config.dev.js 项目开发阶段的配置文件

#### 在新建的文件中写代码
	App.vue
		写上hello Vue
		
	main.js
		导入根组件【使用es6的语法】，渲染根组件【利用Vue】
		
	webpack.config.dev.js
		entry
		

#### 利用 webpack-dev-server + html-webpack-plugin 运行我们的项目
	webpack-dev-server【只是打包生成了bundle.js】
		webpack-dev-server --progress --config webpack.config.dev.js --open --hot
		
		把上面的指令，放在package.json的scripts中
		
		"dev":"webpack-dev-server --progress --config webpack.config.dev.js --open --hot"
		
	html-webpack-plugin【帮我们生成index.html并且自动导入bundle.js】
		安装包
		
		在 webapck.config.dev.js 中配置
Parcel

https://parceljs.org/

基本概念:

1
极速零配置Web应用打包工具

优势:

1
2
3
4
5
6
1、极速打包
2、将你所有的资源打包
3、自动转换
4、零配置代码分拆
5、热模块替换
6、友好的错误日志

实战之基本使用

1
2
3
4
5
6
7
8
9
1、首先通过 Yarn 或者 npm 安装 Parcel 
	npm install -g parcel-bundler

2、创建一个 index.html 和 index.js 文件，并且写好代码

3、打包
	parcel index.html
4、打开浏览器
    parcel index.html --open

实战之和VueJS结合使用

1
2
3
4
5
6
7
8
9
1、首先，我们需要安装 Vue 的依赖关系。
	npm install --save vue
	npm install --save-dev parcel-bundler

2、向 package.json 的 scripts 中添加 start 脚本。
	// package.json
    "scripts": {
      "start": "parcel index.html"
    }
Rollup

https://www.rollupjs.com/guide/zh

基本概念:

1
Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。

优势:

1
2
3
1、静态分析

2、小巧而专一

实战之打包流行库

1
2
3
1、写一个js库

2、使用rollup打包