我用pnpm的workspace搭建了一个项目,这个项目中其中有一个package是使用的rollup打包的一个组件库环境,这个组件库只包含组件部分不包含文档。
这个项目是可以运行的,但是如果在**.vue文件中使用script setup语法的话,name属性没有办法添加。
于是我使用两个script标签一个用于script setup,一个用于 defineComponent 输出名称:
<script lang="ts" setup>
// 组件逻辑代码
</script>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "GSplitPane"
});
</script>
但是如果这样写的话就会抛出一个错误:
我尝试使用 vite-plugin-vue-setup-extend 插件可以在setup上添加name,但是在rollup.config.mjs中添加了插件配置貌似没有生效。rollup.config.mjs配置如下:
import { defineConfig } from "rollup";
import babel from "@rollup/plugin-babel";
import resolve from "@rollup/plugin-node-resolve";
import ts from "rollup-plugin-typescript2";
import vue from "@vitejs/plugin-vue";
import jsx from "@vitejs/plugin-vue-jsx";
import json from "@rollup/plugin-json";
import commonjs from "@rollup/plugin-commonjs";
import { terser } from "rollup-plugin-terser";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import postcss from "rollup-plugin-postcss";
import vueSetupExtend from "vite-plugin-vue-setup-extend";
import pkg from "./package.json" assert { type: "json" };
const createBanner = () => {
return `/*!
* ${pkg.name} v${pkg.version}
* (c) ${new Date().getFullYear()} ${pkg.author}
* @license ${pkg.license}
*/`;
};
export default defineConfig({
input: "./src/index.ts",
output: [
{
banner: createBanner(),
file: "dist/index.js",
format: "cjs"
},
{
banner: createBanner(),
file: "dist/index.esm.js",
format: "esm",
exports: "named"
},
{
banner: createBanner(),
file: "dist/index.umd.js",
format: "umd",
name: "w"
}
],
plugins: [
peerDepsExternal(),
resolve(),
ts(),
vue(),
vueSetupExtend(),
json(),
commonjs(),
jsx(),
babel({
exclude: "node_modules/**",
presets: ["@vue/babel-preset-jsx"],
babelHelpers: "bundled"
}),
terser(),
postcss()
],
external: ["Vue", "element-plus"]
});
组件库的package.json
整体项目的package.json 插件如下:
{
"devDependencies": {
"@babel/plugin-proposal-optional-chaining": "^7.21.0",
"@babel/preset-env": "^7.21.4",
"@rollup/plugin-alias": "^5.0.0",
"@rollup/plugin-babel": "^6.0.3",
"@rollup/plugin-commonjs": "^24.1.0",
"@rollup/plugin-json": "^6.0.0",
"@rollup/plugin-node-resolve": "^15.0.2",
"@types/mockjs": "^1.0.7",
"@types/node": "^18.15.11",
"@typescript-eslint/eslint-plugin": "^5.58.0",
"@vicons/antd": "^0.12.0",
"@vicons/carbon": "^0.12.0",
"@vitejs/plugin-vue": "^4.1.0",
"@vitejs/plugin-vue-jsx": "^3.0.1",
"@vue/babel-preset-jsx": "^1.4.0",
"@vue/compiler-sfc": "^3.2.47",
"@vue/eslint-config-prettier": "^7.1.0",
"@vueuse/core": "^10.0.2",
"autoprefixer": "^10.4.14",
"babel": "^6.23.0",
"babel-eslint": "^10.1.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-preset-env": "^1.7.0",
"chalk": "^5.2.0",
"eslint": "^8.38.0",
"eslint-formatter-pretty": "^5.0.0",
"eslint-plugin-json": "^3.1.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^9.10.0",
"execa": "^7.1.1",
"mockjs": "^1.1.0",
"postcss": "^8.4.21",
"prettier": "^2.8.7",
"reset-css": "^5.0.1",
"rollup": "^3.20.2",
"rollup-plugin-copy": "^3.4.0",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-scss": "^4.0.0",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.34.1",
"rollup-plugin-visualizer": "^5.9.0",
"sass": "^1.62.0",
"sass-loader": "^10.4.1",
"tailwindcss": "^3.3.1",
"typescript": "^5.0.4",
"v3-tour": "^3.1.2",
"vite": "^4.1.0",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-imagemin": "^0.6.1",
"vite-plugin-mock": "^2.9.8",
"vite-plugin-vue-setup-extend": "^0.4.0",
"vue": "3.2.45",
"vue-router": "^4.1.6",
"yorkie": "^2.0.0"
},
"dependencies": {
"animate.css": "^4.1.1",
"await-to-js": "^3.0.0",
"axios": "^1.3.5",
"echarts": "^5.4.2",
"element-plus": "^2.3.3",
"exceljs": "^4.3.0",
"hover.css": "^2.3.2",
"nanoid": "^4.0.2",
"nprogress": "^0.2.0",
"pinia": "^2.0.34",
"resize-observer-polyfill": "^1.5.1",
"sortablejs": "^1.15.0",
"splitpanes": "^3.1.5",
"vue-i18n": "^9.2.2",
"vue3-grid-layout": "^1.0.0"
}
}
没这么搞过,不过目测是 TS 没识别。
你可以试着调换一下
rollup-plugin-typescript2
和@vitejs/plugin-vue
两个插件的顺序看看。另外其实@vitejs/plugin-vue
已经内置了 TS 编译器,不需要再单独再走一遍 TS 的,不知道你这里的为什么要这么用(难道是有单独的 TS 模块也需要导出?)。P.S. 如果项目允许,可以直接升级到 Vue 3.3 的。此版本中新加入了
defineOptions
宏这个语法糖,已经可以直接在 script setup 里定义 name 了。