一、gruntjs
二、gulp
三、rollup
- https://www.rollupjs.com/">官网： https://www.rollupjs.com/
1、介绍
2、特点
3、优点
4、缺点
5、编码
四、Parcel
五、webpack

一、gruntjs

1、介绍

一句话：自动化。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。当你在 Gruntfile 文件正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作。
gruntjs
2、安装

cnpm i grunt  grunt-babel @babel/core @babel/preset-env -D

3、代码

module.exports = function (grunt) {
  //1.加载 babel任务
  grunt.loadNpmTasks("grunt-babel");
  //初始化配置文件
  grunt.initConfig({
    babel: {
      options: {
        sourceMap: true,
        presets: ["@babel/preset-env"],
      },
      dist: {
        files: {
          "dist/app.js": "src/app.js",
        },
      },
    },
  });
  //default指的是入口任务
  grunt.registerTask("default", ["babel"]);
};

 "scripts": {
    "build": "grunt"
  }

二、gulp

1、gulp

gulp 将开发流程中让人痛苦或耗时的任务自动化，从而减少你所浪费的时间、创造更大价值。

cnpm install gulp-cli -g
cnpm install gulp -D
npx -p touch nodetouch gulpfile.js
gulp --help

cnpm install --save-dev gulp-cli gulp gulp-babel @babel/core @babel/preset-env

官网： https://www.gulpjs.com.cn/

2、gulp介绍

基于nodejs的steam流打包
定位是基于任务流的自动化构建工具
Gulp是通过task对整个开发过程进行构建

3、优点

流式的写法简单直观
API简单，代码量小，写法简单优雅
易于学习和使用
适合多页面应用开发

4、缺点

异常处理比较麻烦
工作流顺序难以精细控制
不太适合单页或者自定义模块的开发

5、写法

gulpfile.js 文件

const gulp = require("gulp");
const babel = require("gulp-babel");
function defaultTask(callback) {
  gulp
    .src("src/app.js")//读取源文件
    .pipe(
      babel({//传给babel任务
        presets: ["@babel/preset-env"],
      })
    ).pipe(gulp.dest("dist"));//写到dist里
    callback();
}
exports.default = defaultTask;

三、rollup

官网： https://www.rollupjs.com/

1、介绍

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。
Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。ES6 模块最终还是要由浏览器原生实现，但当前 Rollup 可以使你提前体验。
https://www.rollupjs.com/guide/tools/#babel

2、特点

rollup 下一代ES6模块化工具，最大的亮点是利用ES6模块设计，利用tree-shaking生成更简洁、更简单的代码
一般而言，对于应用用webpack，对于类库使用rollup
需要代码拆分(Code Splitting), 或者很多静态资源需要处理，再或者构建的项目需要引入很多COmmonJS模块的依赖时，使用webpack
代码库是基于ES6模块，而且需要代码能够被其他人直接使用，使用Rollup

3、优点

用标准化的格式(es6)来写代码，通过减少四代码尽可能的缩小包体积
构建速度相对快些

4、缺点

对代码进行拆分、静态资源、CommonJS模块支持不好

5、编码

rollup.config.js

import resolve from "rollup-plugin-node-resolve";
import babel from "rollup-plugin-babel";
export default {
  input: "src/main.js", //webpack entry
  output: {
    //webpack output
    file: "dist/bundle.js", //output filename
    format: "cjs",//common.js   module.exports = ?
    exports: "default",
  },
  plugins: [
    resolve(),
    babel({//babel-loader
      presets: ["@babel/preset-env"],
      exclude: "node_modules/**", // 只编译我们的源代码
    }),
  ],
};

package.json

  "scripts": {
    "build": "rollup -c ./rollup.config.js"
  }

四、Parcel

1.Parcel安装

yarn global add parcel-bundler
npm install -g parcel-bundler
parcel -V

官网： https://parceljs.org/

1、介绍

Pacel是快速、零配置的Web应用程序打包器
目前Pacel只能用来构建用于运行在浏览器中的网页，这也是他的出发点和专注点
Parcel
内置了一个开发服务器，这会在你更改文件时自动重建你的应用程序，并支持模块热替换，以便你快速开发。你只需指定入口文件即可：
零配置快

2、优点

Parcel内置了常见场景的构建方案及依赖，无需安装各种依赖
Parcel能以HTML为入口，自动检测和打包依赖资源
Parcel默认支持模块热替换，真正的开箱即用
0配置，非常快、全部内置了静态资源

3、缺点

不支持SourceMap
不支持剔除无效代码（TreeShaking）
配置不灵活

4、编码

package.json

{
  "name": "4.parceljs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "parcel src/index.html -p 8089"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel": "^1.12.4"
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    hello
    <script src="app.js"></script>
</body>
</html>

app.js


let sum = (a,b)=>a+b;
console.log(sum);

五、webpack

a bunder for javasript and frends

前端学习总结

（四）工程化模块化其他打包解决方案

一、gruntjs

1、介绍

2、安装

3、代码

二、gulp

1、gulp

2、gulp介绍

3、优点

4、缺点

5、写法

三、rollup

官网： https://www.rollupjs.com/

1、介绍

2、特点

3、优点

4、缺点

5、编码

四、Parcel

1.Parcel安装

1、介绍

2、优点

3、缺点

4、编码

五、webpack