通过 cosmos:browserify 在 Meteor 中使用 npm 包

Posted 2023-03-08

【中文标题】通过 cosmos:browserify 在 Meteor 中使用 npm 包

【英文标题】：Using npm package in Meteor via cosmos:browserify

【发布时间】：2015-10-21 10:36:05

【问题描述】：

我正在尝试按照说明here 加载 Radium（这是一个用于内联 css 的 javascript 库）。

在app.browserify.js：Radium = require("radium");。

在package.json："radium": "0.13.4"

但是，当我尝试在应用程序的 js 中使用 Radium 时，内联 css 不起作用。 Chrome 开发工具显示Radium = module.exports(ComposedComponent).。

我假设这应该是一个对象，考虑到我以相同方式加载的 ReactPIXI 工作正常，并且开发工具显示 ReactPIXI = Object factories: Object。

这是我的代码：

AppBody = React.createClass(
  mixins: [ReactMeteorData, Navigation, State, Radium.StyleResolverMixin,   
  Radium.BrowserStateMixin],

render: function() 
  var self = this;
  var styles = 
    base: 
      color: this.state.fontColor,
      background: 'red',
    states: [
      hover: background: 'blue', color: 'red',
      focus: background: 'pink', outline: 'none', color: 'yellow'
    ]

    //also tried
    //':hover': background: 'blue', color: 'red',
    //':focus': background: 'pink', outline: 'none', color: 'yellow'
  ,
  primary: 
    background: 'green'
  ,
  warning: 
    background: 'purple'
  
;


var items = this.state.items.map(function(item, i) 
  return (
      <div>
        <div style= [styles.base, styles['warning']] key=item>
      // also tried <div style = this.buildStyles(styles) key=item>
          item
        </div>
        <button style = [styles.base, styles['warning']] onClick=update >Remove</button>
      </div>
  );
.bind(this));
return (
       items
     )

【问题讨论】：

你还有这个问题吗？如果是的话，我今晚会尝试解决它。​​

是的还是想不通。谢谢。

昨晚我的设置无法重现该问题。我怀疑这完全是一个加载顺序问题。 Meteor 以非常特定的顺序加载文件夹和文件夹中的项目。我会再次查看 docs.meteor.com/#/full/structuringyourapp 并将 00- 或 01- 放在文件夹名称前面，以确保它们也按照您想要的顺序加载。

【参考方案1】：

问题已通过按照Radium 文档中的说明使用 Radium 包装 React.createComponent 得到解决。代码现在看起来像这样，而不是使用 mixins，它可以按预期工作。

AppBody = Radium(React.createClass(
  mixins: [ReactMeteorData, Navigation, State],

render: function() 
  var self = this;
  var styles = 
    base: 
      color: this.state.fontColor,
      background: 'red',
    ':hover': background: 'blue', color: 'red',
    ':focus': background: 'pink', outline: 'none', color: 'yellow'
  ,
  primary: 
    background: 'green'
  ,
  warning: 
    background: 'purple'
  
;


var items = this.state.items.map(function(item, i) 
  return (
  <div>
    <div style= [styles.base, styles['warning']] key=item>
      item
    </div>
    <button style = [styles.base, styles['warning']] onClick=update >Remove</button>
  </div>
);
.bind(this));
  return (
        items
      )
)));

【讨论】：

很高兴您能弄明白，记得将您自己的答案标记为已接受。