2020了驮配，應(yīng)該用ts開發(fā)組件了
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
實(shí)際上這個(gè)并不是我們想要的結(jié)果崇决，ts的靈魂d.ts并沒有生成
7.生成tsconfig.json
npx typescript --init
8.修改生成的tsconfig.json
// rollup 僅支持module鐘設(shè)置es2016和esnext
// "incremental": true, /* Enable incremental compilation */
"target": "ESNEXT",
"module": "ESNext",
...
"declaration": true,
...
這里有個(gè)點(diǎn)，就是先經(jīng)過ts歹茶，然后再經(jīng)過rollup，所以如果rollup.config.js里面的format設(shè)置的cjs，那無論tsconfig怎么設(shè)置享扔，最終的結(jié)果都是cjs
-
npm run build
這樣佑力，就全部出來了
image.png
