@rollup-use/vue3-ts

A Vue3+ typescript npm library bundle tool use rollup. Clone vue3-ts-starter to quick start.

此工具使用 rollup, 可以打包 typescript 语言 的 Vue3 npm 库项目. 中文文档. 可以复制 vue3-ts-starter 以快速开始.

Examples/用例列表

• vue3-ts-starter
• phphe/@he-tree/vue3

You can add your public repo here. 欢迎添加你的项目到这里.

Usage

Follow steps is tested in a project generated by Vite CLI. Example CMD: yarn create vite my-vue-app --template vue-ts

Install dependencies

npm install @rollup-use/core @rollup-use/vue3-ts --save-dev
npm install @babel/runtime tslib -save

Add vue to peerDependencies of package.json.

"peerDependencies": {
  "vue": "^3.*.*"
}

Create a entry file to export Vue components for rollup, such as src/lib-entry.js and with content like follow:

export { default } from "./LibraryComponent.vue";
export { default as CustomName } from "./LibraryComponent2.vue";
export { default as CustomName3 } from "./LibraryComponent3.vue";

Can export multiple components. Can custom exported name.

Copy directory scripts into your project. Add 2 npm scripts to scripts of package.json like follow:

"scripts": {
  "build-lib": "rollup -c scripts/build.js & node scripts/build.js --report",
  "watch-lib": "rollup -c scripts/build.js --watch"
}

Check scripts/build.ts and change it for your requirement. In most case, you may only need to change input. Once scripts/build.ts changed, execute npm run compile-build-lib to generate scripts/build.js. Then execute npm run build-lib to generate the final results.

Exclude core-js

Don't include core-js in your package.json, including dependencies and devDependencies. Or there will be core-js imports in your bundled results.

中文文档

使用

以下步骤在 Vue CLI 生成的项目中测试通过.

安装依赖

npm install @rollup-use/core @rollup-use/vue3-ts --save-dev
npm install @babel/runtime tslib -save

添加 vue 到 package.json 的 peerDependencies.

"peerDependencies": {
  "vue": "^3.*.*"
}

创建打包的入口文件, 此文件导出 Vue 组件, 例 src/lib-entry.js, 示例内容如下:

export { default } from "./LibraryComponent.vue";
export { default as CustomName } from "./LibraryComponent2.vue";
export { default as CustomName3 } from "./LibraryComponent3.vue";

可以导出多个组件, 导出时可以自定义导出名.

复制目录 scripts 到你的项目. 参照如下, 添加 3 条 npm script 到package.json的scripts:

"scripts": {
  "build-lib": "rollup -c scripts/build.js & node scripts/build.js --report",
  "watch-lib": "rollup -c scripts/build.js --watch"
}

按你的需求修改scripts/build.ts. 多数情况下你可能只需要修改input变量. 一旦scripts/build.ts有改动, 执行 npm run compile-build-lib 以生成 scripts/build.js. 再执行 npm run build-lib 即可生成最终结果.

排除 core-js

不要在 package.json 中包含 core-js, 包括 dependencies 和 devDependencies. 否则打包结果中会有 core-js 导入.