1.与webpack类似的工具还有哪些？谈谈你为什么选择使用或放弃webpack？

思维导图

打包工具总结 - 图1

各个demo地址

https://gitee.com/laddish/parcel-demo
https://gitee.com/laddish/grunt-demo
https://gitee.com/laddish/gulp-demo
https://gitee.com/laddish/rollup-demo

grunt

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

Gruntfile.js

图片.png
图片.png

gulp

不适合项目复杂

图片.png

  1. yarn add gulp-cli -g
  2. yarn add gulp -D
  3. npx -p touch nodetouch gulpfile.js
  4. gulp --help
  1. yarn add --save-dev gulp-cli gulp gulp-babel @babel/core @babel/preset-env

gulpfile.js

基于任务流
读取文件传给babel任务写到dist里去

api

src

pipe

desk

图片.png

  1. {
  2.   "name": "gulpdemo",
  3.   "version": "1.0.0",
  4.   "main": "index.js",
  5.   "license": "MIT",
  6.   "scripts": {
  7.     "build":"gulp"
  8.   },
  9.   "dependencies": {
  10.     "@babel/core": "^7.13.10",
  11.     "@babel/preset-env": "^7.13.12",
  12.     "gulp": "^4.0.2",
  13.     "gulp-babel": "^8.0.0"
  14.   }
  15. }

webpack

图片.png

webpack.config.js

mode 模式

devtool 不生成sourcemap

entry 入口文件

module

plugin 插件

图片.png

rollup

介绍 | rollup.js 中文文档 | rollup.js 中文网
https://www.rollupjs.com/guide/introduction
图片.png
图片.png

  1. yarn add rollup-plugin-babel rollup-plugin-node-resolve babel-plugin-external-helpers 
  2. yarn add @babel/core @babel/preset-env

图片.png

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

rollup.config.js

input 类似于webpack的entry

output 输出

file output filename

format:’cjs’ common.js module.exports

exports default

plugins 插件

图片.png

  1. {
  2.   "name": "rollupdemo",
  3.   "version": "1.0.0",
  4.   "main": "rollup.config.js",
  5.   "license": "MIT",
  6.   "scripts": {
  7.     "build": "rollup -c ./rollup.config.js"
  8.   },
  9.   "dependencies": {
  10.     "@babel/core": "^7.13.10",
  11.     "@babel/preset-env": "^7.13.12",
  12.     "babel-plugin-external-helpers": "^6.22.0",
  13.     "rollup-plugin-babel": "^4.4.0",
  14.     "rollup-plugin-node-resolve": "^5.2.0"
  15.   }
  16. }
  1. import resolve from "rollup-plugin-node-resolve";
  3. import babel from "rollup-plugin-babel";
  5. export default {
  6.   input: "src/main.js",
  7.   output: {
  8.     file: "dist/bundle.js",
  9.     format: "cjs",
  10.     exports: "default",
  11.   },
  12.   plugins: [
  13.     resolve(),
  14.     babel({
  15.       presets: ["@babel/preset-env"],
  16.       exclude: "node_modules/**",
  17.     }),
  18.   ],
  19. };

parcel

快速,零配置,静态资源es6都内置

image.png

安装

image.png

  1. yarn global add parcel-bundler
parcel -V

启动

image.png

{
  "name": "parceldemo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "parcel src/index.html -p 8089"
  }
}