滚动异常来保存模块

Question

我使用了一个名为 rollup-plugin-lit-css 转化 .css 文件变成javascript模块。这个插件非常简单，它本质上只是在文件中附加了 export default 到文件中。

我的rollup配置使用 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
}