时间戳

首页 > 解决方案 > 汇总异常以保留模块

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(),
  ],
};

当前行为

假设aimporta.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

标签： javascriptrollup

解决方案

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
}

推荐阅读