小编ton*_*y_k的帖子

我有这种情况,我试图导入一个现有的库,我将调用troublesome(使用Webpack/Babel FWIW),它有一个全局引用jQuery,我试图使用模块语法解决它.

我已成功将jquery导入模块的"本地"范围,通过:

import jQuery from 'jquery'

所以我试过了:

import jQuery from 'jquery'    
import 'troublesome'

但也许并不奇怪,我得到的东西就像jQuery is not a function踢回来一样troublesome.js

我也试过这个:

System.import('jquery')
.then(jQuery => {
    window.jQuery = jQuery
})
import 'troublesome'

但是,事实证明这System.import是所谓的"模块加载器"规范的一部分,该规范是从es6/2015规范中提取的,所以它不是由Babel提供的.有一个poly-fill,但Webpack无法管理通过调用完成的动态导入System.import.

但是......如果我在index.html中调出脚本文件,就像这样:

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/troublesome/troublesome.js"></script>
<script src="the-rest-of-my-js.js"></script>

jQuery解决了引用troublesome.js并且事情很好,但我宁愿避免脚本标记路由,因为webpack不管理这些.

任何人都可以推荐一个体面的策略来处理这样的场景吗？

更新

在@ TN1ck的一些指导下,我最终能够使用imports-loader识别一个以Webpack为中心的解决方案

此解决方案的配置如下所示:

  //...
  module: {
    loaders: [
      //...
      {
        test: require.resolve('troublesome'),
        loader: "imports?jQuery=jquery,$=jquery"
      }
    ]
  }

试图将一些代码从jss移植到样式组件,jss代码看起来像:

//...
const styles = {
  myStyles: {
    color: 'green'
  }
}

const {classes} = jss.createStyleSheet(styles).attach()

export default function(props) {
  return (
     <div>
       <Widget1 className={classes.myStyles}/>
       <Widget2 className={classes.myStyles}/>
     </div>
  )
}

我的问题是在多个组件中实现相同样式共享的惯用方法是什么？

我已经在webpack上研究了几个星期了,我已经看过许多前端设置的例子,可能只是后端的这一个设置.

我正在尝试设置一个带有节点后端的反应应用程序(例如express,koa,hapi等),其中我需要至少一个后端的转换步骤(例如babel,coffeescript等),并且我认为在那里使用webpack以保持一致性与在混合中添加另一种构建机制(例如gulp,grunt等)会很好.

如果我可以对后端进行更改并让服务器自动重启(监视样式)也会很棒.

我想知道最好的方法是基本上有两个不同的项目设置与自己的package.json和webpack.config文件.也许将后端一个嵌套server在顶级项目文件夹的文件夹下,并使用顶级package.json文件中的一个或多个脚本指令来控制这两个.

我想我可能需要将一台服务器代理到另一台服务器以避免CORS问题.

寻找任何更多webpack战斗测试的指导,而不是我的体面设置.

问候,托尼.

谁能提供有关将图像放置到AppBar中的惯用方式的指南，并将其限制为标准材料高度（例如，桌面为64px）吗？

我目前正在使用material-ui@next（1.0.0-beta.2当前）。

我发现类似：

<AppBar>
  <Toolbar>
    <IconButton color="contrast" aria-label="Menu">
      <MenuIcon />
    </IconButton>
    <img src={logo} style={{height: 64}}/>
    <Typography type="title" color="inherit">
      React Scratch
    </Typography>
  </Toolbar>
</AppBar>

效果很好。

实际徽标是高度大于64的png文件，因此，如果我不降低它的高度，它会将AppBar的高度扩展到Material规范之外。

在当前主分支版本src/styles有一个getMuiTheme.js，这似乎很容易实现这一高度，但在@next版本我在看，该文件根本不存在和TBH，我不能轻易确定如何这个高度被设定了。

我发现目前正在对AppBar进行翻新，以使其具有可组合性，因此客户流失可能使回答这个问题变得困难，但以防万一有人对此有所了解，我想我会把这个问题扔掉。

谢谢！

我有一个安静的 api，它接受点（路径）字符串作为参数键。

例如，我可以称之为：

/widgets?material.type=iron

所以我有一个 redux-form 字段，如：

<Field name="material.type" component={TextField} label="material type" />

但是 redux-form 将点解释material.type为{material: {type: 'iron'}}.

我明白为什么这是默认行为，但我想知道是否有一种简单的方法可以用属性或其他东西来阻止它，我可以{'material.type': 'iron'}代替它？