Javascript 保存模块的汇总异常

我使用一个名为

rollup plugin lit css

的汇总插件将

.css

文件转换为javascript模块。这个插件非常简单，它本质上只是将

export default

附加到文件中

我的汇总配置使用

preserveModules

和

output.dir

来避免捆绑模块

import resolve from 'rollup-plugin-node-resolve';
import litcss from 'rollup-plugin-lit-css';
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';

export default {
  preserveModules: true,
  input: 'src/a.js',
  output: {
    dir: 'dist',
    format: 'es',
  },
  plugins: [
    litcss(),
    babel({ babelrc: true }),
    resolve({ browser: true }),
    commonjs(),
  ],
};

当前行为 假设

a

导入

a.css

和

b

。目前的情况是：

src/
├── a.js
├── a.css
├── b.js

为此：

dist/
├── a.js
├── a.css
├── b.js

期望输出 相反，我希望得到以下信息：

dist/
├── a.js
├── b.js

---

由于

a.css

的转换内容捆绑到

a.js

preserveModules

中，因此不能用于选择性地创建单独的块，请改用

在这种情况下，

a.js

和

a.css

具有相同的块名

a

，并且将为它们创建

a.js

chunkFileNames

指定输出文件名，并且是必需的

完整配置：

import path from 'path'
import resolve from 'rollup-plugin-node-resolve'
import litcss from 'rollup-plugin-lit-css'
import babel from 'rollup-plugin-babel'
import commonjs from 'rollup-plugin-commonjs'

export default {
  input: 'a.js',
  output: {
    dir: 'dist',
    format: 'es',
    chunkFileNames: '[name].js'
  },
  plugins: [
    litcss(),
    babel({ babelrc: true }),
    resolve({ browser: true }),
    commonjs(),
  ],
  manualChunks: id => path.parse(id).name
}

import path from 'path'
import resolve from 'rollup-plugin-node-resolve'
import litcss from 'rollup-plugin-lit-css'
import babel from 'rollup-plugin-babel'
import commonjs from 'rollup-plugin-commonjs'

export default {
  input: 'a.js',
  output: {
    dir: 'dist',
    format: 'es',
    chunkFileNames: '[name].js'
  },
  plugins: [
    litcss(),
    babel({ babelrc: true }),
    resolve({ browser: true }),
    commonjs(),
  ],
  manualChunks: id => path.parse(id).name
}