打包工具作用是什么？存在的意义？有哪些好处？

web前端打包工具，它能将我们前端人员写得less,sass等编译成css.将多个js文件合并压缩成一个js文件。它的作用就是通过将代码编译、压缩，合并等操作，来减少代码体积，减少网络请求。以及方便在服务器上运行。目前，会使用web前端打包工具是现代前端人员必备技能。

准备工作

安装nodejs

windows直接下载安装，linux可能自带的node版本有点低需要自己安装。
使用淘宝的cnpm包管理器
由于npm的包下载源在国外，所以安装依赖包时速度可能会很慢，建议使用淘宝的cnpm，下载源在国内，所以速度很快。cnpm安装方式有两种：

1、 npm install -g cnpm –registry=https://registry.npm.taobao.org

直接使用npm安装，将以上命令输入到终端中即可

2、若以上方式不行，建议移步cnpm网站使用第二种安装方式

parcel使用

构建工具推荐使用parcel

首先通过 Yarn 或者 npm 安装 Parcel ：
- Yarn:
  
  yarn global add parcel-bundler
- npm:
  
  npm install -g parcel-bundler
在你正在使用的项目目录下创建一个 package.json 文件：
```
yarn init -y
```
or
```
npm init -y
```
Parcel 可以使用任何类型的文件作为入口，但是最好还是使用 HTML 或 JavaScript 文件。

接下来，创建一个index.html 和 index.js 文件。

Parcel 内置了一个当你改变文件时能够自动重新构建应用的开发服务器，而且为了实现快速开发，该开发服务器支持热模块替换。只需要在入口文件指出：
```
parcel index.html
```
现在在浏览器中打开 http://localhost:1234/

具体看官网parcel中文网

san使用

安装san

建议直接使用网页外联js文件的方式，简单迅速。

开发版本：
```
<script src="https://unpkg.com/san@latest/dist/san.dev.js"></script>
```
建议在开发环境不要用生产版本，开发版本提供了有助于开发的错误提示和警告！

具体看官网san官网

任务描述

支持js、css格式的解析

这个parcel自带支持，webpack需要配置插件，所以如果你使用parcel就自动完成这个任务了。这里再提下parcel的优点，parcel会自动根据你引入的文件来安装所需的插件，所以如果想使用less或者其他css预处理语言，直接在网页引入相应的文件，parcel在构建时会自动处理一切事情，例如使用less
<link rel="stylesheet" href="./index.less">


区分 development / production 环境

这里注意区分你的san文件的版本，开发时一定要使用开发版本，这样会大幅度提高你定位错误的能力。
使用npm scripts设罝dev、test、build命令

这里只谈parcel的配置方法,在package.json文件里这样配置即可

其中 index.html 请对应替换成你的入口文件
```
"scripts": {
  "test": "echo "Error: no test specified" && exit 1",
  "start": "parcel index.html",
  "dev": "npm run start",
  "build": "parcel build index.html"
}
```
写一个san组件并在浏览器中显示hello world

移步san文档
使用babel-loader进行js代码转换

这里只介绍parcel的使用方法，对比webpack来说，真是灰常简单

使用npm或者cnpm安装babel-preset-env即在终端中输入以下命令
```
npm i -D babel-preset-env 
```
然后在与package.json文件相同目录下新建一个文件名为 .babelrc 的文件并输入以下配置，parcel便会在构建时自动配置
```
{
  "presets": [
      "env"
  ]
}
```

注意引入script的位置

错误的引入位置：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello world</title>
    <script src="https://unpkg.com/san@latest/dist/san.dev.js"></script>
        <script src="./index.js"></script>
</head>
<body>
</body>

正确的引入位置与顺序：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello world</title>
    <script src="https://unpkg.com/san@latest/dist/san.dev.js"></script>
</head>
<body>
    <script src="./index.js"></script>
</body>
</html>

parcel快速搭建开发san

打包工具作用是什么？存在的意义？有哪些好处？

准备工作

parcel使用

san使用

任务描述

注意引入script的位置

猜你喜欢