.css文件未添加到js仅有的带有汇总库的发行版中

问题描述

我正在使用rollup-starter-lib作为JS库的基础来编写JS库

"version": "1.29.0"

具有main.js文件和main.css文件，没有html文件。 main.js文件是有关DOM操作的，main.css文件在实现步骤中是必需的，以便轻松集成此JS库，而不是向用户提供指令。

我觉得这是.jss文件由于树摇晃而无法创建，因为该JS库本身未使用css。

电流分布

-dist
--my-faceapi-js-lib.cjs.js
--my-faceapi-js-lib.esm.js
--my-faceapi-js-lib.umd.js

预期分配

-dist
--my-faceapi-js-lib.cjs.js
--my-faceapi-js-lib.esm.js
--my-faceapi-js-lib.umd.js
--my-faceapi-js-lib.css

将main.css文件复制到dist文件夹中，因为它不会缩小文件，这是意外的。

rollup.config.js

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import pkg from './package.json';
//import copy from 'rollup-plugin-copy'
//import postcss from 'rollup-plugin-postcss'

export default [
    {
        input: 'src/main.js',output: {
            name: 'howLongUntilLunch',file: pkg.browser,format: 'umd'
        },plugins: [
            resolve(),// so Rollup can find `ms`
            commonjs() // so Rollup can convert `ms` to an ES module
        ]
    },{
        input: 'src/main.js',output: [
            { file: pkg.main,format: 'cjs' },{ file: pkg.module,format: 'es' }
        ]
    }
];

main.js

import * as faceapi from "face-api.js";
...
...
...
import 'main.css';
...
...

基本上，JS库本身没有使用main.css。但是集成此库时很有必要。

解决方法

您需要使用rollup-plugin-postcss插件（您已经拥有它，但已对其进行了注释）：

// rollup.config.js
import postcss from 'rollup-plugin-postcss'
import path from 'path'

export default {
  plugins: [
    postcss({
      extract: path.resolve('dist/my-faceapi-js-lib.css'),plugins: []
    })
  ]
}

,

自1.29.0 to 2.26.3起更新汇总版本后，此问题已得到解决。 （还将相关软件包更新到汇总库-不确定与修复相关）

"@rollup/plugin-commonjs": "^15.0.0","@rollup/plugin-node-resolve": "^9.0.0","rollup": "^2.26.3",

，并且在将['./main.css'],添加为外部对象之后。

    {
        input: 'src/main.js',external: ['./main.css'],output: [
            { file: pkg.main,format: 'cjs' },{ file: pkg.module,format: 'es' }
        ]
    }

rollup.config.js

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import pkg from './package.json';
import postcss from 'rollup-plugin-postcss'
import path from 'path'

export default [
    {
        input: 'src/main.js',output: {
            name: 'my-faceapi-js-lib',file: pkg.browser,format: 'umd'
        },plugins: [
            postcss({
                minimize: true,extensions: ['.css'],extract: path.resolve('dist/face-auth-rnd.css'),}),resolve(),// so Rollup can find `ms`
            commonjs() // so Rollup can convert `ms` to an ES module
        ]
    },{
        input: 'src/main.js',format: 'es' }
        ]
    }
];