par2-模块2-模块化打包工具【其他打包工具】

1: Rollup

   Rollup：一款 ES Module 打包器, 将散落的细小模块整理到一起，从而使这些划分的模块更好的运行在 浏览器环境 或者 node.js 环境。

  Rollup 更为小巧【仅仅是一款ESM 打包器】，并不具备 webpack 类似 HMR 的这种高级特性，

  Rollup 初衷： 提供一个充分利用 ESM 各项特性的高效打包器

  1: Rollup 快速上手

       1:  安装 ：rollup

                        npm install rollup --save-dev 

       2:  执行： rollup ./src/index.js

  2: Rollup 配置文件

       1: 根目录下新建 rollup.config.js

       2: 配置 rollup.config.js    

export default {
    input: './src/index.js',
    output: {
        file: 'dist/bundle.js',
        format: 'iife' // 输出文件的格式：自执行函数格式
    }
}

      3:  执行： rollup --config  或者  rollup --config rollup.config.js   

  3: Rollup 使用插件

       Rollup 自身功能：就是 ES Module 模块的合并，打包

       如果需要 加载其他类型资源模块  或 在代码中导入 CommonJS 模块  或  编译ES6 新特性 

       Rollup 都支持插件的方式扩展，插件是它唯一的扩展途径

       1:  安装 ：rollup-plugin-json【导入json格式文件】 

                       npm install rollup-plugin-json --save-dev

       2:  配置  rollup.config.js      

import json from 'rollup-plugin-json'

export default {
    input: './src/index.js',
    output: {
        file: 'dist/bundle.js',
        format: 'iife' // 输出文件的格式：自执行函数格式
    },
    plugins: [
        json() // 将调用的结果放入，而不是将这个函数放入
    ]
}

       3: src/index.js （导入json格式文件，package.json）

// 导入模块成员
import { log } from './logger'
import messages from './messages'
import { name, version } from '../package.json'

// 使用模块成员
const msg = messages.hi

log(msg)

log(name)
log(version)

  4:  执行： rollup --config  或者  rollup --config rollup.config.js   

  4: Rollup 加载 NPM 模块

       Rollup默认只能按照文件路径去加载本地文件模块，如：node-modules的第三方模块，并不能像webpack一样，用模块名称去导入模块。

      rollup-plugin-node-resolve插件使用后：我们就可以直接使用模块名称导入模块 

      1:  安装 ：rollup-plugin-node-resolve    和     lodash-es【lodash的ES Module模块】

                       npm install rollup-plugin-node-resolve --save-dev

                       npm install lodash-es --save-dev

      2:  配置  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()
    ]
}

      3: src/index.js

// 导入模块成员
import _ from 'lodash-es' // lodash 的 ES Module 版本,Rollup只能处理ES Module模块代码
import { log } from './logger'

log(_.camelCase('hello world'))

     4:  执行： rollup --config  或者  rollup --config rollup.config.js    

  5: Rollup 加载 CommonJS 模块

     1:  安装 ： rollup-plugin-commonjs

                       npm install  rollup-plugin-commonjs --save-dev

      2:  配置  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()
  ]
}

     3: 新建 cjs-module.js   并在  src/index.js 导入

         cjs-module.js

module.exports = {
   foo: 'bar'
}

        src/index.js        

import { log } from './logger'
import cjs from './cjs-module'

log(cjs)

       4:  执行： rollup --config  或者  rollup --config rollup.config.js    

  6: Rollup 代码拆分 【动态导入】

      1: src/index.js

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

      2: 配置   rollup.config.js         

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

      3: 执行： rollup --config  或者  rollup --config rollup.config.js    

      4: 结果：dist 下生成index.js(入口js), 和 动态导入输出的 logger-6b....js 都是采用AMD标准输出的

  7: Rollup 多入口打包

      1: 配置   rollup.config.js     

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

     2: 执行： rollup --config  或者  rollup --config rollup.config.js              

     3: 结果： dist 下 生成  foo.js  ， bar.js  ， logger-6b....js【公共部分提取文件】， 

     4: 问题： AMD 格式生成的 bundle 模块不能直接引用

        解决方法：  在 dist 下新建 index.html ，配置如下：

《 dist/index.html 》

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!-- AMD 标准格式的输出 bundle 不能直接引用 -->
  <!-- <script src="foo.js"></script> -->
  <!-- 需要 Require.js 这样的库 -->
  <!-- 必须通过require.js来加载以AMD 标准格式输出的这个模块，通过 data-main属性指定require加载入口模块的路径 -->
  <script src="https://unpkg.com/requirejs@2.3.6/require.js" data-main="foo.js"></script>
</body>
</html>

  8: Rollup 选用原则

      开发应用程序【webpack】

      框架或者类库 【Rollup】【 React/ vue 等诸多知名框架或类库都是通过 Rollup.js 作为模块打包器】

2: Parcel

     parcel:  是 Web 应用打包工具,   并且不需要任何配置。它自动会加载安装我们的依赖项

   1: Parcel 快速上手

       1: 安装： Parcel 

npm install parcel-bundler --save-dev

      2: 配置 package.json        

 "scripts": {
    "dev": "parcel src/*.html",
    "build": "parcel build src/*.html"
  },

   3: 运行

npm run dev  // 以开发模式运行

npm run build  // 以生产模式运行