NPM包——按需加载rollup

一、目的

当创建好自己的npm包后，当在包中包含多个模块，不同的功能时，如果全量引入会包含很多不必要的代码不必要的模块，会使项目体积变大，这个时候就需要按需加载了。或者在创建多个npm包存放不同的功能模块，但是这样的话拆分的很细会使维护变得很麻烦，使用时也不是很方便。
在这里使用了rollup和gulp进行将不同功能的模块进行整合打包，进而方便进行按需加载。

二、rollup

1、rollup

rollup是javascript模块打包器，可以将各个小模块整合打包。
rollup中文文档 (版本比较旧)
rollup英文文档
rollup github

2、安装

• 全局安装rollup

npm i rollup -g

• 在项目当中引入rollup

npm i rollup -D

3、创建config文件

• 创建rollup.config.js文件
• 需要export default 默认的配置文件
• 例:

export default {
  input: 'src/plugins/common.js',
  output: {
    file: 'lib/common.min.js',  //打包后存放的文件
    format: 'cjs'           //输出格式 amd es6 iife umd cjs
  },
  plugins: [
    getBabelOutputPlugin({
      presets: ['@babel/preset-env'],
    }),
    nodeResolve({
      browser: true,
      preferBuiltins: true,
    }),// 查找包路径
    commonjs(), // 支持commonjs的插件
    terser(), // 压缩代码的插件
  ],
}

• input 入口文件
• output 需要定义打包后文件的存放地址 还需要定义文件的输出格式

 output: {
  file:'lib/common.min.js',  //打包后存放的文件
  format: 'cjs'           //输出格式  "amd", "cjs", "es", "iife" or "umd"
                          // 1. `iife`: 自执行函数, 可通过 `<script>` 标签加载
                          // 2. `amd`: 浏览器端的模块规范, 可通过 RequireJS 可加载
                          // 3. `cjs`: Node 默认的模块规范, 可通过 Webpack 加载
                          // 4. `umd`: 兼容 IIFE, AMD, CJS 三种模块规范
                          // 5. `es`: ES module 规范, 可用 Webpack, Rollup 加载
}

• plugins 定义打包时所需要的模块

import commonjs from “@rollup/plugin-commonjs”;
在plugins中： commonjs()
使在项目中import的ES模块可以被正常加载

import nodeResolve from “@rollup/plugin-node-resolve”;
在plugins中： nodeResolve ()
使在项目中用到的node_modules能够被正常加载

import {terser} from ‘rollup-plugin-terser’
在plugins中： terser()
压缩代码

import json from “@rollup/plugin-json”;
在plugins中： json()
使在项目中import的JSON文件可以被正常加载

import { getBabelOutputPlugin } from ‘@rollup/plugin-babel’;
在plugins中：
getBabelOutputPlugin({
presets: [‘@babel/preset-env’],
}),
使用babel，提高代码兼容性

更多的plugins 详看 rollup plugins github

4、运行rollup

• 在cmd中运行 rollup -c
• 或者在cmd中运行 rollup --config [config文件 | rollup.config.js]

5、rollup多个文件

• 可以在rollup.config.js文件中进行配置
• 例：

export default [
  input: 'src/plugins/common.js',
  output: {
    file: 'lib/common.min.js',  //打包后存放的文件
    format: 'cjs'           //输出格式 amd es6 iife umd cjs
  },
  plugins: [
    getBabelOutputPlugin({
      presets: ['@babel/preset-env'],
    }),
    nodeResolve({
      browser: true,
      preferBuiltins: true,
    }),// 查找包路径
    commonjs(), // 支持commonjs的插件
    terser(), // 压缩代码的插件
  ],
  ...
]

6、优化

• 当在文件中会引入外部的一些文件时，这些文件可能会很大，会造成打包后的文件代码很大。这种情况下可以使用 gulp 将外部文件移动到打包后的文件夹下边
  需要保持目录接口，防止引用文件找不到。
  gulp 讲解详见下一章