问题描述
我们正在维护一个使用 Rollup 导出 ESM 模块的内部库。我们最近才切换到使用 CSS 模块,我们已经设置了 rollup-plugin-postcss。我们希望将这些样式注入头部而不是外部文件。
import styleInject from '../node_modules/style-inject/dist/style-inject.es.js';
我们的消费库然后失败了
Uncaught Error: Cannot find module '../node_modules/style-inject/dist/style-inject.es.js'
我希望将 ESM 导出到 import styleInject from 'style-inject'
和 style-inject 作为依赖项包含在 package-lock.json 中。使用 CSS Modules 并为库的使用者注入头部的正确方法是什么?
rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
import json from '@rollup/plugin-json';
import postcss from 'rollup-plugin-postcss';
import pkg from './package.json';
import fg from 'fast-glob';
import path from 'path';
export default [
{
input: 'src/index.js',external: external(),output: [
{
name: '@my/packageName',file: pkg.module,format: 'es',sourcemap: true,},],plugins: [
{
name: 'watch-external',async buildStart() {
const files = await fg(['src/index.d.ts','playground/**/*']);
for (let file of files) {
this.addWatchFile(path.resolve(file));
}
},json(),postcss({
modules: true,}),babel({
exclude: /node_modules/,babelHelpers: 'runtime',babelrc: false,presets: [
[
'@babel/preset-env',{
modules: false,useBuiltIns: 'entry',corejs: 3,targets: {
ie: 11,'@babel/preset-react',plugins: [
'@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties','@babel/plugin-proposal-export-namespace-from',commonjs(),];
function external() {
const { dependencies = {},peerDependencies = {} } = pkg;
const externals = [
...Object.keys(dependencies),...Object.keys(peerDependencies),];
return id =>
// match 'lodash' and 'lodash/fp/isEqual' for example
externals.some(dep => id === dep || id.startsWith(`${dep}/`));
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)