如何解决.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' }
]
}
];
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。