汇总异常以保留模块

Question

我使用一个名为rollup-plugin-lit-css的汇总插件将. css文件转换为javascript模块。那个插件非常简单，它本质上只是将导出默认附加到文件中。

我的汇总配置使用preserveModules和输出。避免绑定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.jschunkFileNames指定输出文件名，这是必需的。

完整配置：

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
}