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

2020了，应该用ts开发组件了
demo https://github.com/757566833/rollup-guide

1.添加ts支持

yarn add rollup-plugin-typescript2 typescript --dev

2.修改src/main.js

export const concat = (arr1: number[], arr2: number[]) => {
    return [...arr1, ...arr2]
}
export default concat

3.修改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';
/** @type {import('rollup').RollupOptions} */
const options = {
    input: 'src/main.ts',
    output: [{
        file: path.resolve(__dirname, 'dist','bundle.js'),
        format: 'cjs'
    }, {
        file:  path.resolve(__dirname, 'dist','bundle.min.js'),
        format: 'cjs',
        plugins: [terser()]
    }],
    plugins: [resolve(),commonjs(),typescript()]
};
export default options;

4.修改package.json

{
  "devDependencies": {
    "@rollup/plugin-commonjs": "^11.0.1",
    "@rollup/plugin-node-resolve": "^7.0.0",
    "rollup": "^1.30.1",
    "rollup-plugin-terser": "^5.2.0",
    "rollup-plugin-typescript2": "^0.25.3",
    "typescript": "^3.7.5"
  },
  "scripts": {
    "build": "rollup -c"
  }
}

5.npm run build
6.打包过后的文件

image.png

实际上这个并不是我们想要的结果，ts的灵魂d.ts并没有生成
7.生成tsconfig.json

npx typescript --init

8.修改生成的tsconfig.json

// rollup 仅支持module钟设置es2016和esnext
 // "incremental": true,                   /* Enable incremental compilation */
    "target": "ESNEXT",                         
    "module": "ESNext",                     
...
 "declaration": true, 
...

这里有个点，就是先经过ts，然后再经过rollup，所以如果rollup.config.js里面的format设置的cjs，那无论tsconfig怎么设置，最终的结果都是cjs

npm run build
这样，就全部出来了

image.png