rollup开发自己的组件库（4）

1.结合package.json,添加几条

demo https://github.com/757566833/rollup-guide

参照antd和react，react下有两个文件夹分别打包成了umd和cjs，antd下面有三个文件夹，分别是cjs，esm，umd，

{
 ...
  "main": "lib/index.js",
  "module": "es/index.js",
  "unpkg": "dist/demo.min.js",
 ...
}

2.修改rollup.config.js

import path from 'path';
import { terser } from 'rollup-plugin-terser';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from 'rollup-plugin-typescript2';
import pkg from './package.json'
/** @type {import('rollup').RollupOptions} */
const options = {
    input: 'src/main.ts',
    output: [{
        file: path.resolve(__dirname, pkg.main),
        format: 'cjs'
    }, {
        file:  path.resolve(__dirname,  pkg.module),
        format: 'es',
    }, {
        file:  path.resolve(__dirname,  pkg.unpkg),
        format: 'umd',
        name:'demo',
        plugins: [terser()]
    }],
    plugins: [resolve(),commonjs(),typescript()]
};
export default options;

3.npm run build

image.png

4.随便找一个d.ts,因为他们都是一样的
修改package.json

...
"typings": "lib/main.d.ts",
...

这一章关于rollup的内容没有多少，更多的实际上是package.json这个文件该怎么写，就不赘述了