极客观点
项目管理
HarmonyOS
rollup打包vue3组件报错
相关代码
rollup 配置文件
/* eslint-disable import/no-dynamic-require */
import fs from 'fs';
import fsExtra from 'fs-extra';
import path from 'path';
import vue from 'rollup-plugin-vue';
import json from '@rollup/plugin-json';
import images from '@rollup/plugin-image';
import postcss from 'rollup-plugin-postcss';
import { terser } from 'rollup-plugin-terser';
import typescript from 'rollup-plugin-typescript2';
import resolve, { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs'; // 将CommonJS模块转换为 ES2015 供 Rollup 处理
import alias from '@rollup/plugin-alias';
/*
*
* 路径分隔符,windows和linux分隔符不同
*/
const { sep } = require('path');
let cPartPath = process.argv[4];
if (!cPartPath) {
cPartPath = 'ths';
} else {
cPartPath = cPartPath.replace('--', '');
}
console.log('安装包含' + cPartPath + '路径的组件');
const config = {
root: path.resolve(__dirname, '../ths', ''), // 获取 ths 文件夹路径，作为处理的根路径
src: path.resolve(__dirname, '../../', 'src/*'),
sep, // 路径分隔符,windows和linux分隔符不同
isDev: process.env.NODE_ENV !== 'production', // 判断环境，生产环境会开启代码压缩
buildComponentsMessage: [], // 要编译的组件数组,做为全局变量使用
buildComponentsConfig: [], // 要编译的组件数组,做为全局变量使用
};
function initPlugins(componentSourcePath) {
// 公共插件配置
const plugins = [
vue({
css: false,
compileTemplate: true,
}),
images({ include: ['**/*.png', '**/*.jpg'] }),
postcss({
extensions: ['.css', '.scss'],
extract: true,
}),
resolve(),
// css(),
commonjs(),
json(),
// 支持TS
typescript({
tsconfig: 'tsconfig-build.json',
tsconfigOverride: {
compilerOptions: {
declaration: true,
types: ['ths-common-base', 'ths-common-ou', 'ths-common-bpm'],
// declarationDir: path.join(__dirname, `../ths/${folder}/types`),
},
include: ['types',
path.resolve(componentSourcePath, 'src'),
path.resolve(componentSourcePath, '*/*.ts'),
path.resolve(componentSourcePath, '*/*.d.ts'),
],
},
}),
nodeResolve({
extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
modulesOnly: true,
}),
alias({
'@/*': ['./src/*'],
}),
];
return plugins;
}
// 公用方法
const commonFunction = {
/**
* 字符串转大驼峰
* @param {*} string
*/
stringToCamel(string) {
const arr = string.split(sep);
let resStr = arr.reduce((prev, cur) => {
const str = prev + cur.slice(0, 1).toUpperCase() + cur.slice(1);
return str;
});
resStr = resStr.slice(0, 1).toUpperCase() + resStr.slice(1);
return resStr;
}, /**
* 字符串转中划线拼接
* @param {*} string
*/
stringToDash(string) {
const arrList = string.split(sep);
let resStr = '';
arrList.forEach((one) => {
if (resStr && one) {
resStr = resStr + '-' + one;
} else {
resStr = one;
}
});
return resStr;
},
};
function create(componentSourcePath, camelName) {
console.log('componentSourcePath:' + componentSourcePath);
/*
* 获取包的 package.json 文件
* @rollup/plugin-json 使 rollup 可以使用 require 的方式将json文件作为模块加载
* 它返回json对象
*/
// eslint-disable-next-line global-require
const pkg = require(path.resolve(componentSourcePath, 'package.json'));
// eslint-disable-next-line global-require
const tsconfigJson = require(path.resolve(__dirname, 'tsconfig-build.json'));
tsconfigJson.compilerOptions.declarationDir = path.resolve(componentSourcePath, 'types');
tsconfigJson.include = [path.resolve(componentSourcePath, 'src')];
const plugins = initPlugins(componentSourcePath);
/* 如果不是开发环境，开启压缩 */
if (!config.isDev) plugins.push(terser());
// 返回rollup的配置对象
return {
// 打包入口：拼接绝对路径
input: path.resolve(componentSourcePath, 'index.ts'),
/*
* 配置打包出口
* 分别打包两种模块类型 cjs 和 es
* 路径使用 package.json 中配置的 main 和 module
*/
output: [
{
name: camelName,
file: path.resolve(componentSourcePath, pkg.main),
format: 'umd',
sourcemap: true,
globals: {
vue: 'Vue',
'vue-i18n': 'VueI18n',
appConfig: 'appConfig',
'@ths/u-common-base': '@ths/u-common-base',
},
paths: {
vue: 'https://unpkg.com/vue@next',
},
},
{
exports: 'auto',
file: path.join(componentSourcePath, pkg.module),
format: 'es',
globals: {
vue: 'Vue',
'vue-i18n': 'VueI18n',
appConfig: 'appConfig',
'@ths/u-common-base': '@ths/u-common-base',
},
},
],
// 配置插件
plugins: [
...plugins,
],
// 指出应将哪些模块视为外部模块
external: [
'vue',
'vue-i18n',
'echarts',
'echarts-liquidfill',
'@ths/c-common-base-table',
'@ths/c-common-base-col',
'@ths/c-common-base-paging',
'@ths/c-common-base-button',
'@ths/c-common-base-code',
'@ths/c-common-base-upload',
'@ths/c-common-ou-form',
'@ths/c-common-base-tree',
'@ths/s-common-base',
'@ths/u-common-base',
'crypto-js',
'jsonwebtoken',
'axios',
'js-cookie',
'element-plus',
],
};
}
/**
* 遍历编译所有组件
* @param {*} folder
*/
function readDirRecur(folder) {
const files = fs.readdirSync(folder);
if (files.length > 0) {
files.forEach((file) => {
const fullPath = folder + sep + file;
const isFile = fs.statSync(fullPath);
if (isFile && isFile.isDirectory()) {
readDirRecur(fullPath);
} else if (fullPath.endsWith('package.json')) {
// 业务组件源文件位置D:\THSPlatform\idea\frame\study\project\demo8\microapp8\package\ths\components\c-common-base-button
const componentSourcePath = path.resolve(fullPath, '../');
// 中间位置，例如：D:\THSPlatform\idea\frame\study\project\demo8\microapp8\package\ths
const thsRoot = path.resolve(__dirname, '../', 'ths');
const arrList = componentSourcePath.split(sep);
// 中划线拼接name，例如：example-demo-button
const dashName = arrList[arrList.length - 1];
// 大驼峰name，例如：DemoButton
const camelName = commonFunction.stringToCamel(dashName);
// 包含输入路径
if (cPartPath && componentSourcePath.indexOf(cPartPath) > -1) {
// 排除ths\types目录
if (fullPath.indexOf(`ths${sep}types`) === -1) {
config.buildComponentsMessage.push({
componentSourcePath,
camelName,
});
}
}
}
});
}
}
console.log(`1/2：遍历路径中包含${cPartPath}的组件`);
readDirRecur(config.root);
console.log(`2/2：共找到${config.buildComponentsMessage.length}个要编译的组件`);
if (config.buildComponentsMessage && config.buildComponentsMessage.length > 0) {
// 第二步：编译组件
config.buildComponentsMessage.forEach((componentMessage) => {
config.buildComponentsConfig.push(create(componentMessage.componentSourcePath, componentMessage.camelName));
});
module.exports = config.buildComponentsConfig;
/*
* 第三步：复制组件到node_modules目录下
* console.log('4/5：开始复制组件到node_modules目录下');
* config.buildComponentsMessage.forEach((componentMessage) => {
* fsExtra.copy(componentMessage.componentSourcePath, componentMessage.componentClassPath, (err) => {});
* });
*/
// console.log('5/5：组件编译完成，并复制到node_modules路径下');
} else {
console.log(`没有找到${cPartPath}路径下的组件，路径用${sep}分隔`);
}
你不要直接在tempalte里写方法，定义到script中，然后引用试试看