2

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

"version": "1.29.0"

它有main.js文件和main.css文件，没有html文件。 main.jsfile 是关于 DOM 操作的，main.css在实现步骤中需要 file ，以便轻松地集成这个 JS 库，而不是给用户一个指令。

我觉得它的 .css 文件由于树抖动而没有创建，因为这个 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';
...
...

基本上没有main.css在 JS 库中使用它自己。但是在集成这个库时是必要的。

4

2 回答 2

0

您需要使用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: []
    })
  ]
}
于 2020-08-16T11:53:17.320 回答
0

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

"@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',
        external: ['./main.css'],
        output: [
            { file: pkg.main, format: 'cjs' },
            { file: pkg.module, format: 'es' }
        ]
    }
];
于 2020-08-18T10:04:03.890 回答