Rollup 意外生成了反应状态的文件
Rollup unexpectedly generates a file for reactive state
我对 rollup 有点陌生,在过去的几周里遇到了几个问题。
我目前正在使用汇总将 Lit 组件构建到生产环境中。
出于某种未知原因,当它生成一个文件时,我认为这是每个组件的反应状态 - query-assigned-elements-78bcb1b1.js
。
每个具有反应状态的组件都会导入此文件。
我需要不输出这个文件,保持实际文件中的状态,因为组件需要单独使用,没有任何依赖和导入。
汇总-config.mjs:
...
export default (args) => {
const isProd = args.prod ? true : false;
const isDev = args.dev ? true : false;
console.log(
`Building ${
isProd ? 'production' : isDev ? 'development' : 'local'
} build..`
);
const distProd = 'dist';
const distDev = 'dev/dist';
const distLocal = 'dev/components';
let envPath = isProd ? distProd : isDev ? distDev : distLocal;
let build = [
{
input: ['src/**/[!_]*.ts'],
output: {
dir: envPath,
},
plugins: [
resolve(),
multiInput.default({
relative: 'src/',
}),
commonjs(),
typescript({
compilerOptions: {
outDir: envPath,
sourceMap: false,
declaration: false,
declarationMap: false,
inlineSources: false,
},
}),
template(),
terser({
ecma: 2017,
module: true,
warnings: true,
}),
copy({
patterns: '**/assets/*.{svg,png,jpg,gif,webp}',
rootDir: './src',
}),
],
preserveEntrySignatures: 'strict',
},
];
return build;
};
然后每个组件都有 import{r as t,_ as e,e as o,n as i,s as r,$ as a}from"../query-assigned-elements-78bcb1b1.js";
。任何建议将不胜感激。
当汇总配置的输入过于宽泛时,似乎会出现此问题:
input: ['src/**/[!_]*.ts']
如果每个单独的点亮元素都放在自己单独的文件夹中,则需要分别对每个点亮元素应用汇总。如果 rollup 输入过于宽泛(从某种意义上说它将所有元素作为输入),它会看到给定的依赖项 (query-assigned-elements) 被用于所有给定的元素,而不是将它单独嵌入到每个文件,它都会创建一个单独的外部文件(query-assigned-elements-78bcb1b1.js)并且引用正在导入中。
将输入更改为
input: ['./src/<element-folder>/[!_]*.ts']
每个元素的 和 运行 汇总分别解决了这个问题。
我对 rollup 有点陌生,在过去的几周里遇到了几个问题。
我目前正在使用汇总将 Lit 组件构建到生产环境中。
出于某种未知原因,当它生成一个文件时,我认为这是每个组件的反应状态 - query-assigned-elements-78bcb1b1.js
。
每个具有反应状态的组件都会导入此文件。
我需要不输出这个文件,保持实际文件中的状态,因为组件需要单独使用,没有任何依赖和导入。
汇总-config.mjs:
...
export default (args) => {
const isProd = args.prod ? true : false;
const isDev = args.dev ? true : false;
console.log(
`Building ${
isProd ? 'production' : isDev ? 'development' : 'local'
} build..`
);
const distProd = 'dist';
const distDev = 'dev/dist';
const distLocal = 'dev/components';
let envPath = isProd ? distProd : isDev ? distDev : distLocal;
let build = [
{
input: ['src/**/[!_]*.ts'],
output: {
dir: envPath,
},
plugins: [
resolve(),
multiInput.default({
relative: 'src/',
}),
commonjs(),
typescript({
compilerOptions: {
outDir: envPath,
sourceMap: false,
declaration: false,
declarationMap: false,
inlineSources: false,
},
}),
template(),
terser({
ecma: 2017,
module: true,
warnings: true,
}),
copy({
patterns: '**/assets/*.{svg,png,jpg,gif,webp}',
rootDir: './src',
}),
],
preserveEntrySignatures: 'strict',
},
];
return build;
};
然后每个组件都有 import{r as t,_ as e,e as o,n as i,s as r,$ as a}from"../query-assigned-elements-78bcb1b1.js";
。任何建议将不胜感激。
当汇总配置的输入过于宽泛时,似乎会出现此问题:
input: ['src/**/[!_]*.ts']
如果每个单独的点亮元素都放在自己单独的文件夹中,则需要分别对每个点亮元素应用汇总。如果 rollup 输入过于宽泛(从某种意义上说它将所有元素作为输入),它会看到给定的依赖项 (query-assigned-elements) 被用于所有给定的元素,而不是将它单独嵌入到每个文件,它都会创建一个单独的外部文件(query-assigned-elements-78bcb1b1.js)并且引用正在导入中。
将输入更改为
input: ['./src/<element-folder>/[!_]*.ts']
每个元素的 和 运行 汇总分别解决了这个问题。