Rollup ES Modules打包器

相比于webpack，Rollup更为小巧。但Rollup仅仅是一款ESM打包器，Rollup中并不支持类似HMR这种高级特性。他的目的就是提供一个充分利用ESM各项特性的高效打包器

• 安装rollup npm i rollup -D

• 通过参数指定打包入口文件 rollup ./src/index.js

• 通过–format指定输出的格式 rollup --format iifellfe（自调用函数）

• 通过–file执行输出的文件的路径 rollup --format iife --file dist/bundle.js

• 默认自动会开启Tree Shaking优化打包后结果。Tree Shaking这样的概念最早也是在rollup中提出的

• 支持配置文件配置打包过后结果的参数，在运行命令时，需要通过–config表明这里使用的是项目中的配置文件rollup --config，默认是不会读取配置文件的，也可以通过这样的参数去指定不同配置的名称，如：rollup --config rolluo.config.js
  rollup.config.js

  export default { // 运行在node环境当中。但rollup会处理这个配置文件，所以这里可以直接使用esm去导出配置
    input: 'src/index.js', // 打包的入口文件路径
    output: { // 输出的相关配置
      file: 'dist/bundle.js', // 输出的文件名
      format: 'iife' // 输出格式
    }
  }
  

• 插件是Rollup唯一的扩展途径
  例如： rollup-plugin-json在rollup当中导入json文件的插件

  • 安装rollup-plugin-json
  • 导入插件模块
    rollup.config.js

    import json from 'rollup-plugin-json' // 默认导出的是插件函数
    
    export default {
      input: 'src/index.js',
      output: {
        file: 'dist/bundle.js',
        format: 'iife'
      },
      plugins: [
        json() // 将函数的调用结果添加到plugins的数组当中
      ]
    }
    
    

    index.js

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

    打包后生成的bundle.js文件
    

• Rollup加载npm模块
  rollup默认只能通过本地文件路径的方式加载本地模块，对于node_modules中的第三方模块并不能像webpack一样直接通过模块的名称导入模块

  • 安装rollup-plugin-node-resolve，这样就可以在代码当中直接使用模块名称导入模块了

  • 在配置文件中导入，然后配置到plugins数组当中

  • rollup默认只能处理esm模块，所以使用第三方库需要使用esm模块的库
    rollup.config.js

    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()
      ]
    }
    
    

    index.js

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

• Rollup加载CommonJS模块
  目前有很多库还是不支持esm模块，所以如果想要使用CommonJS模块的库，可以安装rollup-plugin-commonjs
  rollup.config.js

  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()
    ]
  }
  
  

  添加一个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.hi
  
  log(msg)
  
  log(name)
  log(version)
  log(_.camelCase('hello world'))
  log(cjs)
  
  

  打包后生成的bundle.js就会以对象的形式出现在打包后的文件中
  

• Rollup 代码拆分
  使用ems的动态导入的方式实现模块的按需加载，rollup内部也会自动去处理代码的拆分
  index.js

  // 动态导入
  import('./logger').then(({ log }) => {
    log('code splitting~')
  })
  

  rollup.config.js

  export default {
    input: 'src/index.js',
    output: {
      // file: 'dist/bundle.js', // 代码拆分需要输出多个文件，所以不能使用file
      // format: 'iife' // 使用代码拆分打包，输出格式不能是iife,因为自执行函数会把所有的模块都放到同一个函数当中，并不会像webpack一样有引导代码，所以iife没有办法实现代码拆分
      dir: 'dist', // 需要输出多个文件可以使用dir的参数
      format: 'amd' // 想要使用代码查分只能使用amd或者CommonJS，那在浏览器中只能使用amd标准
    }
  }
  
  

  打包后的文件就会在dist下输出两个文件，然后以动态加载的方式加载对象的模块
  

• Rollup多入口打包
  rollup.config.js

  export default {
    // 多入口的两种入口文件配置方式，数组，或是和webpack一样的对象形式
    // input: ['src/index.js', 'src/album.js'],
    input: {
      foo: 'src/index.js',
      bar: 'src/album.js'
    },
    output: {
      dir: 'dist',
      format: 'amd' // 因为是多入口，所以不能使用iife（自调用函数）这种输出格式
    }
  }
  
  

  album.js

  import fetchApi from './fetch'
  import { log } from './logger'
  
  fetchApi('/photos?albumId=1').then(data => {
    data.forEach(item => {
      log(item)
    })
  })
  
  

  index.js

  import fetchApi from './fetch'
  import { log } from './logger'
  
  fetchApi('/posts').then(data => {
    data.forEach(item => {
      log(item)
    })
  })
  
  

  以上两个文件都同时引用了log，fetchApi两个模块，所以在打包后的公共文件被提取出来了
  
  打包后的index.html
  

• Rollup 选用原则
  优势：

  • 输出的结果更加扁平，执行效率更高
  • 自动移除未引用的代码（Tree Shaking）
  • 打包结果依然完全可读
    缺点：
  • 加载非ESM的第三方模块比较复杂（需要引入插件）
  • 模块最终都被打包到一个函数中，无法实现HMR（模块热替换）
  • 浏览器环境中，代码拆分功能依赖AMD库
    如果开发项目，webpack是更有的选择，但如果开发一个框架或者类库（react，vue等大多数知名框架/库都在使用Rollup）

Parcel 零配置的前端应用打包器

• 安装 npm i parcel-bundler -D

• parcel和webpack一样支持任意类型的文件作为打包入口，但官方建议以html文件作为打包入口。支持对esm的打包

• parcel 文件路径+文件名 parcel这个命令不仅可以帮我们打包应用，而且同时还开启了一个开发服务器，类似webpack的dev-server。支持热更新和热替换

• parcel支持自动安装依赖，例如想要使用jquery，那就可以在文件中正常导入，保存之后parcel就会自动安装刚刚导入的模块。避免了额外的手动操作

• parcel支持零配置加载其他类型的资源模块，如想要加载css文件，只需要直接import导入即可，不需要安装额外的插件或者loader

• parcel支持动态导入，如果在代码中使用了动态导入，他也会自动拆分代码

• parcel以生产模式打包 parcel build 文件路径+文件名

• 对于相同体量的打包，parcel会比webpack快很多，因为在parcel内部使用的是多进程同时工作，充分发挥了多核CPU的性能，在webpack中也可以使用happypack的插件来去实现这一点

• 打包后输出的文件都会被压缩，而且样式文件也都单独提取出来了

• 优势：

  1. 完全零配置
  2. 自动安装依赖
  3. 构建速度更快（多进程同时工作）

• webpack生态更好一些，随着发展webpack越来越好用
  main.js

  
  // 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) {
    // accept和webpack不同的是webpack接收两个参数，模块名和回调函数，而这里只接收一个参数就是回调函数，只支持当前模块发生变化时或者当前模块所依赖的模块变化时触发
    module.hot.accept(() => {
      console.log('hmr')
    })
  }
  
  

  
  以上就是关于Rollup和Parcel的笔记啦~又是全部完全没有接触过的内容，感觉要学习的东西太多啦，继续加油吧！