• vue 源码打包的分为以下几种(umd, cjs, esm)
• react 源码打包也是上面的三种（umd, cjs, esm）
• 所有的学习都是从模仿开始，那咋们也来配置一下，打包成这三种类型的js.

既然要使用rollup, 那肯定是需要安装rollup这个打包工具的，如果已经全局安装的请忽略，个人是局部安装的， npm install rollup -D, 然后在package.json中的script中加入 打包的命令 "build": "rollup -c ./build/rollup.config.js",然后在根目录下面建立 build文件夹

这里的配置文件其实很简单，既然rollup的output属性配置的是一个对象，那么我配置成一个数组，里面包含多个输出对象，那不就有了。

在build目录下面，建立一个名称叫做 rollup.build.js的文件，然后放入以下代码：

export default {
  input: 'src/index.js', // 打包的内容，自己随便写一些简单的代码
  output: [
    {
      file: 'dist/cjs/index.js', // 打包成commonjs
      format: 'cjs'
    },
    {
      file: 'dist/esm/index.js', // 打包成esmodule
      format: 'esm'
    },
    {
      file: 'dist/index.js',
      format: 'umd',
      name: 'index' // umd 规范，一定要有一个名字，不然打包报错
    },
  ]
};
复制代码

执行 npm run build ，然后在src同层目录下面就会生成一个dist文件夹，内容如下:

现代代码就是在原有的基础上，加了es6以后的 promise, async, await, 生成器，类等，这些代码需要进行代码转译的。

人家都告诉咋们怎么弄了，直接安装包就好。 npm install --save core-js@3

然后在 "useBuiltIns": "usage",下面加入以下配置（由于本人安装的版本是3.15.2，所以我的值就是3.15.2,各位同学请结合实际情况来配置）

 "corejs": "3.15.2",
复制代码

看到这个问题，最好的方法就是去看那些打包好的文件。

我打包好的文件，那些转译的包都没有引入进来，怎么使用也是报错。

安装以下两个包: npm install @rollup/plugin-node-resolve @rollup/plugin-commonjs

• @rollup/plugin-node-resolve: 让rollup可以找到node环境的其他依赖
• @rollup/plugin-commonjs : 将commonJS代码转译成 esmodule的代码

然后修改配置文件：

import commonjs from '@rollup/plugin-commonjs';
import { nodeResolve } from '@rollup/plugin-node-resolve';
{
...
plugins:[
    nodeResolve(),
    commonjs(),
]
}
复制代码

那咋们继续来打包。

在这里肯定有的人要说话了，为啥一点点代码，打包后却增加了这么多代码，因为本人在代码里面 使用了 类，promise, async, await, 并且还要兼容ie10， 作为一个包，肯定是能满足越多的人越好,一般的包都会支持这些的。

这里的测试，咋们直接建立html文件，然后在外部使用 dev环境来测试

ie10中查看效果

恭喜你，同学，也恭喜我自己，到了这一步。一些基本的库的打包方式就已经好了。如何发布到npm, 请查看其他的博客。我这还没有完呢

在 src同级目录下面添加tsconfig.json,内容根据自己实际的情况添加，我这里给一个案例 ，如下：

{
  "compilerOptions": {
   // ts编译的目标文件，我这里编译成es6， 然后交给babel
    "target": "ES2017",
    // 使用最新的语法 
    "module": "esnext",
    // 库使用dom， dom可迭代
    "lib": ["ESNext", "DOM", "DOM.Iterable"],
    // 模块解析策略是node
    "moduleResolution": "node",
    // 开启es与其他模块的交互
    "esModuleInterop": true,
    // 开启严格模式
    "strict": true,
    //  开启声明文件的输出
    "declaration": true,
    // 允许导入json模块
    "resolveJsonModule": true,
    // 跳过库的检查
    "skipLibCheck": true,
    "noUnusedLocals": true,
    // 开启声明文件输出目录
    "declarationDir": "./dist/types/"
  },
  // 只编译src目录下面的文件
  "include": [
    "./src"
  ]
}

复制代码

配置完后 ，我们来打包。npm run build:

通过这张图，我们发现一个问题，代码比变少了，是es6的代码。这个代码肯定是不能在ie上使用的。那就是babel没有生效了？

解决办法

我们的ts转移后又没有输出，babel默认是不会对.ts文件后缀名进行转译的，所以我们需要加一个添加转译名。

{
...
puligins:[
    babel({
        // 解析 拓展名为ts的文件
      extensions: [
        '.ts'
      ],
    })
]
}
复制代码

这样打包就行了。是不是很简单，但是你看到的简单，往往在写代码的时候需要写好几遍。测试的效果就不看了，和上面是一样的。

我们会发现，目前打出的包是没有对代码进行压缩的，上面的方式代码的可读性还是比较强的，所以接下来对代码就行压缩

npm install rollup-plugin-terser -D 然后在最好使用这个插件就行。