其他打包工具 Rollup Parcel

Rollup

rollup与webpack十分相似 Rollup更为小巧，只是ESM的打包器 不支持HMR(模块热替换)这种高级特性
是为了提供ESM各种特性的高效打包器

快速上手

yarn add rollup --dev 安装依赖 会在 node-modules 下 bin/ rollup 提供一个cli程序
运行 yarn rollup yarn rollup ./src/index.js 打包入口文件是index.js yarn
rollup ./src/index.js --format iife 输出的是浏览器支持的iife格式 yarn rollup
./src/index.js --format iife --file dist/bundle.js 输出到dist文件夹下

配置文件
rollup.config.js

export default {
    input: 'src/index.js', // output: {
    file: 'dist/bundle.js',format: 'iife'}
}

打包命令
yarn rollup --config 启动打包配置文件
yarn rollup --config rollup.config.js 启动不同配置文件名称

使用插件
导入commonJS模块，或边缘ECMAScript的新特性
插件是Rollup唯一的扩展路径
rollup-plugin-json
yarn add rollup-plugin-json --dev

import json from 'rollup-plugin-json'export default {
    input: 'src/index.js',output: {
    file: 'dist/bundle.js',format: 'iife'},plugins: [json()]
}

src/index.js

// 导入模块成员
import {
     log } from './logger'
import messages from './messages'
import {
     name, version } from '../package.json'// 使用模块成员
const msg = messages.hilog(msg)log(name)
log(version)

加载npm 模块
yarn add rollup-plugin-node-resolve --dev

import json from 'rollup-plugin-json'
import resolve from 'rollup-plugin-node-resolve'export default {
    input: 'src/index.js',output: {
    file: 'dist/bundle.js',format: 'iife'},plugins: [json(),resolve()]
}

src/index.js

// 导入模块成员
import _ from 'lodash-es'   //导入lodash模块
import {
     log } from './logger'
import messages from './messages'
import {
     name, version } from '../package.json'// 使用模块成员
const msg = messages.hilog(msg)log(name)
log(version)
log(_.camelCase('hello world'))

加载CommonJS模块
yarn add rollup-plugin-commonjs --dev

import json from 'rollup-plugin-json'
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'export default {
    input: 'src/index.js',output: {
    file: 'dist/bundle.js',format: 'iife'},plugins: [json(),resolve(),commonjs()]
}

cjs-module.js

module.exports = {
    foo: 'bar'
}

index.js

// 导入模块成员
import _ from 'lodash-es'
import {
     log } from './logger'
import messages from './messages'
import {
     name, version } from '../package.json'
import cjs from './cjs-module'// 使用模块成员
const msg = messages.hilog(msg)log(name)
log(version)
log(_.camelCase('hello world'))
log(cjs)

代码拆分
yarn rollup --config --format amd

import('./logger').then(({
     log }) => {
    log('code splitting~')
})export default {
    input: 'src/index.js',output: {
    // file: 'dist/bundle.js',// format: 'iife'dir: 'dist',format: 'amd'}
}

多入口打包

export default {
    // input: ['src/index.js', 'src/album.js'],input: {
    foo: 'src/index.js',bar: 'src/album.js'},output: {
    dir: 'dist',format: 'amd'}
}

yarn rollup --config

选用原则 Rollup/Webpack

输出结果更扁平
自动移除未引用代码
打包结果依然完全可读

缺点

加载非ESM的第三方模块比较复杂
模块最终都被打包到一个函数中，
无法实现HMR(模块热替换) 浏览器环境中，
代码拆分功能依赖AMD库

如果不适合大量引用第三方库，引用html，分包
如果开发框架或者一个类库，比较适合，大多知名框架、库打包使用rollup

Parcel

零配置的前端应用打包器

只需要了解简单几个命令就可以使用打包方案
yarn init
yarn add parcel-bundler --dev
yarn pracel src/index.html 打开一个开发服务器，并开始运行打包

模块热替换
自动安装依赖
直接导入写，保存文件后自动安装 支持动态导入

// import $ from 'jquery'
import foo from './foo'
import './style.css'
import logo from './zce.png'foo.bar()import('jquery').then($ => {
    $(document.body).append('<h1>Hello Parcel</h1>')$(document.body).append(`<img src="${
      logo}" />`)
})if (module.hot) {
    module.hot.accept(() => {
    console.log('hmr')})
}

生产模式打包

yarn parcel build src/index.html