前言

  • 前端未来的发展前景是全栈（结合java，php），而不是单纯前端的全栈
  • 使用node.js能开发区块链
  • it发展很快，跳出循环看世界
  • 短短五年时间跳了五个台阶，基本上一年一个新技术
    • 2013-2018
      • pc端 - 移动端h5 - 大数据 - 人工智能 - 区块链
      • 也就是IT(信息技术)向DT(数据技术)的转变
      • 还有物联网 智能家居 人工智能 中控系统 数据可视化

parcel介绍

parcel定义

parcel官网
新一代web打包神器，适用于经验不同的开发者。它利用多核处理提供了极快的速度，并且不需要任何配置。跟webpack类似，webpack很复杂要配置很多东西，但是parcel是简化版本的webpack

parcel的优点与缺点

  • 优点
    • 无需配置
    • 极速打包
    • 自动转换
      • 内置了常见场景的构建方法及其依赖，无需再安装各种依赖
    • 模块热替换
      • 默认支持模块热替换，真正做到开箱即用
  • 缺点
    • 不支持SourceMap：在开发模式下，Parcel也不会输出SourceMap,目前只能去调试可读性极低的代码
    • 不支持剔除无效代码（TreeShaking）;很多时候我们只用到了库中的一个函数，结果parcel把整个库都打包了进来
    • 一些依赖会让Parcel出错；当你的项目依赖了一些npm上面的模块时，有些npm模块会让parcel出错误

使用Parcel的场景

目前Parcel只能用来构建用于运行在浏览器中的网页，这也是他的出发点和专注点，在软件行业不可能既简单又可以简单适应各种场景的方案，就算所谓的人工智能也许会解决这个问题，但人工智能不能保证百分百的正确性。

如何安装npm包

  1. 全局安装：npm install -g
  2. 本地安装：npm install –save-dev (开发依赖)

首先通过 Yarn 或者 npm 安装 Parcel

Yarn:

  • yarn global add parcel-bundler

npm:

  • npm install -g parcel-bundler

前端开发方式介绍：

  • 传统开发方式：
    • 需求分析-设计-编码-测试-运行-维护（类似串联）
      • 特点：生产效率以及维护效率非常缓慢，得一个个去查找文件，去更改再上线。
  • 现代化前端开发方式:
    • 模块化 工程化 组件化 全栈化
      • 特点：提高开发效率
        • 开发/维护 阶段是非常有必要的
          • 开发：面对复杂的js和html越来越多了，我们之前只能做到手动去引入依赖，如何让文件之间的关系 变得可依赖呢？或者让文件之间自动相关联。这就是所说的工程化，在这之前还要做到模块化（组件和模块的区别：区别在颗粒度方面，模块化可以理解为零件，比如轮胎上面的螺丝钉，组件就是轮胎）。

模块组件的核心思想

针对开发和维护阶段的，管理复杂的js，html文件，然后构建依赖关系图。之后我们进行文件更改的时候，我们直接构件图，就可以直接进行定位。传统方式只有左边这一块没有右边这一块。

image
image

webpack使用

打包，编译，开发环境应用是非常麻烦的，因为要借助很多插件，不管是引入插件还是入口出口都需要自己配置，那parcel就不需要用到配置文件了（webpack里面的配置文件是webpack.config.js）

webpack和parccel打包速度对比

parcel远远优于webpack(前者耗费时间是后面的三分之一)

parcel打包命令

parcel 主文件入口
比如说是 parcel index.html（全局安装可以用这个命令）
如果不是全局安装使用这条命令就会出现’parcel’不是内部或者外部命令，也不是可运行或批处理文件。解决方法是建立一个package.json文件。

在你正在使用的项目目录下创建一个 package.json 文件

yarn init -y

or

npm init -y

在packjson.json文件里面配置打包命令：

1
2
3
4
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "parcel index.html"
},

然后在根目录下面新建index.html文件和在app文件夹里面新建index.js文件，然后引入js

1
2
3
4
5
6
//index.html
<html>
<body>
  <script src="./app/index.js"></script>
</body>
</html>
1
2
//index.js
console.log("hello world");

接下来整合html和js

执行打包命令：npm run build

image
image

可以看见他创建了一个开发的服务器环境

image
image

真正部署的是dist文件夹下面的

image
image

dist文件夹

image
image

index.html：

1
2
3
4
5
<html>
<body>
  <script src="/app.37d33215.js"></script>
</body>
</html>

打包的文件

image
image
1
2
3
4
5
6
7
console.log("hello world");
},{}],6:[function(require,module,exports) {

var OVERLAY_ID = '__parcel__error__overlay__';

var global = (1, eval)('this');
var OldModule = module.bundle.Module;

后期怎么进行维护：

就不需要像传统方式一样，一个个去找，只需要这个文件在什么地方，我们进行文件名的更改，然后再进行布局就行了。
例如改下app/index.js
console.log(“welcome to see you”);
然后index.html的控制台里面的数值也发生对应变化，专有名词解释叫模块热替换，就是我改变文件内容，前台会自动更新，不需要手动去刷新。

parcel的自动转化的特点：

场景:js的代码兼容性处理，用es6能提高开发效率，但是es6的兼容不好，我们现在用babel-loader来处理es6的兼容性，babel-loader他是个预处理器，如果我们用webpack需要去下载babel-loader，并且还需呀去配置解析，但是用parcel就不需要。
假设在index.js里面写个类，在es5里面没有类的概念。

index.js：

1
2
3
4
5
6
7
8
9
10
11
class Point{
	constructor() {
		this.name = "yveda"
		this.age = 18
	}
	go(){
		console.log(`${this.name}的年龄是${this.age}岁`)
	}
}
const point = new Point()//实例化一下
point.go()//执行一下

然后localhost:1234 的控制台里面显示的是：

yveda的年龄是18岁

而且在app.37d33215.js里面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//含有es5的代码，他改成了构造函数的类型 	
var Point = function () {
	function Point() {
		_classCallCheck(this, Point);

		this.name = "yveda";
		this.age = 18;
	}
	_createClass(Point, [{
		key: "go",
		value: function go() {
			console.log(this.name + "\u7684\u5E74\u9F84\u662F" + this.age + "\u5C81");
		}
	}]);
	return Point;
}();
//所以这个parcel非常强大的一点，不需要跟wepack一样去下载很多插件

再举个例子：

1
2
3
//在index.js后面添
const arr = [1,2,3];
console.log(...arr)

然后再次进行打包npm run build
在里面app.37d33215.js找到如下

1
2
3
var arr = [1, 2, 3];
(_console = console).log.apply(_console, arr);
},{}],4:[function(require,module,exports) {

发现他把这个点转化成apply了，所以这就是parcel的自动转换，es6自动转换为es5

css的引入

现在我们做组件和模块，很少把js和css引入当前的html当中，在组件化开发中，js和css一般都放在一起的，那怎么让两个之间相关联呢？
如果使用webpack的话，需要一个css-loader，style-loader,还有要import css。

新建app/css/style.css:

1
2
3
4
5
6
7
8
9
10
body{
	margin:0;
	background: #008666;
	color: #000;
}
.box{
	width: 220px;
	height: 200px;
	border:3px solid red;
}

然后在index.js里面引入style.css添加一个块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import "../css/style.css";
	const oDiv = document.createElement('div');
	oDiv.className = 'box';
	document.body.appendChild(oDiv);

	class Point{
		constructor() {
			this.name = "yveda"
			this.age = 18
		}
		go(){
			console.log(`${this.name}的年龄是${this.age}岁`)
		}
	}
	const point = new Point()//实例化一下
	point.go()//执行一下

	const arr = [1,2,3];
	console.log(...arr)

进行打包 npm run build

image
image

image
image

进入控制台

1
2
3
4
5
6
7
<html>
<link rel="stylesheet" href="/style.aa408015.css">
<script src="/style.aa408015.js"></script>
<body>
  <script src="/js.2a519707.js"></script>
</body>
</html>

右击/style.aa408015.css，选择open in new table，发现样式已经引入进来了

1
2
3
4
5
6
7
8
9
10
body{
	margin:0;
	background: #333333;
	color: #000;
}
.box{
	width: 220px;
	height: 200px;
	border:3px solid red;
}

在新建一个app/js/app.js

并将index.js里面的东西清空，将原先index.js里面的内容全部剪切到app.js里面
然后将app.js导入到index.js里面

1
2
import Print from './app.js';
Print();
image
image

开发和部署

  • 开发的问题
    • 怎么提高开发效率(协同开发)
    • 怎么降低维护难度
  • 部署
    • 代码检查
    • 压缩代码
    • 增量更新
    • 单元测试

怎么解决？
构建(全部文件进行编译)和编译(单文件编译)，
我用parcel和webpack这种就是构建

传统前端工程体系：

  1. 应用层：image，css，js等
  2. server层：CDN，tpl，http….
  3. QA层：集成测试
  4. 开发层：单元测试，image,js，sass,less,java,php,python…
  5. 数据层：DB

大前端 前端工程体系

  1. 应用层：image，css，js等
  2. server层：CDN，tpl，http….
  3. QA层：集成测试
  4. 开发层：前后端分离，使用node.js跟服务器端进行数据的交互。
  5. 数据层：DB

为什么现在大前端能做这些项目的构建打包，集成测试是因为有了node.js，他改变了前端，通过这个东西他跟后台，数据库做交互。