preserveModules的汇总例外

Question

我使用一个名为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中

Answer 1

不能使用preserveModules有选择地创建单独的区块，请改用manualChunks。

{
  output: {
    dir: 'dist',
    format: 'es',
    chunkFileNames: '[name].js'
  },
  manualChunks: id => path.parse(id).name
}

在本例中，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
}