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
