在我的React组件旁边汇总ES模块

问题描述

我有一个ReactJS模块，其中有许多样式化组件以及颜色，字体等的集中集合作为主题对象。样式化组件可以按预期导出，并且可以在其他ReactJS应用程序中使用，但是，主题集合无法正常工作。

我想我在这里缺少一些小东西。我可以在编译后的输出中看到它们，但是当我尝试import { THEME } from 'my-ui'时会出错

ERROR in ../my-ui/dist/index.es.js
Module not found: Error: Can't resolve 'global-styles' in '/Users/david.lozzi/git/my-ui/dist'

我的颜色被导出为 /global-styles/index.js

export const THEME = {
  COLORS: {
    primary: '#C3C3C3',secondary: '#D50000'
  }
}

，然后在我的index.js中将其导入并与其他模块（有效）一起导出：

import Button from 'components/button';
import { THEME } from 'global-styles';

export {
  Button,THEME
}

这里是rollup.config.js

import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import external from 'rollup-plugin-peer-deps-external';
import postcss from 'rollup-plugin-postcss';
import postcssurl from 'postcss-url';
import resolve from 'rollup-plugin-node-resolve';
import url from 'rollup-plugin-url';
import svgr from '@svgr/rollup';
import alias from '@rollup/plugin-alias';
import path from 'path';
import pkg from './package.json';

export default {
  input: 'src/index.js',external: [
    "styled-components","react","react-dom",],output: [
    {
      file: pkg.main,format: 'cjs',sourcemap: true
    },{
      file: pkg.module,format: 'es',sourcemap: true
    }
  ],plugins: [
    external(),postcss({
      extract: true,minimize: true,plugins: [
        postcssurl({
          url: 'inline'
        })
      ]
    }),url(),svgr(),babel({
      exclude: 'node_modules/**',plugins: ["@babel/plugin-proposal-class-properties"]
    }),resolve(),commonjs(),alias({
      entries: [
        { find: 'src',replacement: path.resolve(__dirname,'./src/') },{ find: 'assets','./src/assets/') },{ find: 'components','./src/components/') }
      ]
    }),onwarn(warning,warn) {
    if (
      warning.code === 'CIRculaR_DEPENDENCY'
      && warning.importer.indexOf('node_modules/semantic-ui-react') > -1
    ) return;
    warn(warning);
  }
};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

reactjs reactjs rollupjs