支持多入口操作,支持 typescirpt 装饰器模式,config 里面 output.format 使用 umd
模式不支持代码分割,单一文件入口建议 umd
模式
需要官方文档移步 rollup文档
rollup.config.js
import path from 'path'
import resolve from 'rollup-plugin-node-resolve'
import babel from 'rollup-plugin-babel'
import { uglify } from 'rollup-plugin-uglify'
import vuePlugin from 'rollup-plugin-vue'
import less from 'rollup-plugin-less'
import typescript from 'rollup-plugin-typescript2'
const resolveFile = name => path.resolve(__dirname, name)
const extensions = ['.js', '.ts', '.tsx', '.vue']
// ts
const tsPlugin = typescript({
tsconfig: resolveFile('./tsconfig.json'), // 本地ts配置
extensions
})
export default {
input: [
'src/vue-demo/index.vue',
'src/ts-demo/test.ts'
],
output: {
dir: 'dist/',
format: 'es' // cjs amd 可用
},
plugins: [
tsPlugin,
resolve(extensions),
uglify(), // 压缩代码
vuePlugin({
compileTemplate: true
}),
less({
output: 'dist/vue-demo.css'
}), // less编译
babel({
exclude: 'node_modules/**', // 只编译源代码
extensions,
presets: [
"@babel/preset-env",
"@babel/preset-typescript",
],
plugins: [
[
"@babel/plugin-proposal-decorators",
{
legacy: true
}
]
]
})
]
}
package.json
{
//...,
"scripts": {
"dev": "rollup -c ./rollup.config.js -w",
"build": "rollup -c ./rollup.config.js"
},
"dependencies": {
"tslib": "^1.10.0",
"vue": "^3.0.7"
},
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/plugin-proposal-decorators": "^7.12.12",
"@babel/plugin-transform-runtime": "^7.12.10",
"@babel/preset-env": "^7.12.10",
"@babel/preset-typescript": "^7.12.7",
"@rollup/plugin-node-resolve": "^11.0.1",
"@umijs/fabric": "^2.5.7",
"@vue/compiler-sfc": "^3.0.7",
"babel-plugin-external-helpers": "^6.22.0",
"babel-plugin-import": "^1.12.1",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"rollup": "^2.35.1",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-less": "^1.1.3",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-typescript2": "^0.29.0",
"rollup-plugin-uglify": "^6.0.4",
"rollup-plugin-vue": "^6.0.0",
"typescript": "^3.4.5"
},
//...
}
入口test.ts
import { Greeter } from './modules';
var cube = new Greeter('cube')
var doIt = cube.greet()
modules.ts
function DemoClassDecorator(target: Function) {
target.prototype.xname = 'decorator'
Object.seal(target);
}
@DemoClassDecorator
export class Greeter {
greeting: string;
xname!: string;
constructor(message: string) {
this.greeting = message;
}
greet(): string {
return 'Hello, ' + this.greeting;
}
}
入口vue-demo
- name
命令
npm run build
,可以看到dist中打包出三个文件 index.js,test.js,vue-demo.cssnpm run dev
,监听源文件修改并打包
另外推荐 el-admin-table,基于 Vue2.x + ElementUI 封装的 table/pagination/form
多合一组件