在客户端React组件中导入npm模块

Question

在Meteor中，如果我在反应组件中从这样的npm导入lodash，并且在以下位置的console.log“lodash”中，它将始终在组件中未定义。同样的事情也随着时刻发生。我的智慧结束了，因为从文档中说我认为这是可能的。这是可能的，如果有的话，我在这里缺少什么？非常感谢任何帮助。

import React from 'react'
import lodash from 'lodash'

console.log(lodash) // lodash is found just fine

export default class SomeComponent extends React.Component {
    constructor(props) {
        super(props)
        this.someFunction = this.someFunction.bind(this)
    }
    someFunction() {
        console.log(lodash) // Throws error that lodash is undefined.
    }
}

Answer 1

我把你的组件放到一个流星的例子中，它运行正常。

e.g。

git clone https://github.com/meteor/simple-todos-react
cd simple-todos-react
npm i
npm i --save lodash
meteor

然后将以下内容添加到/imports/ui/App.jsx，如此差异：

 import { Tasks } from '../api/tasks.js';                        
 import Task from './Task.jsx';                                                  
 import AccountsUIWrapper from './AccountsUIWrapper.jsx';                        

+import lodash from 'lodash'                                                     
+console.log(lodash) // lodash is found just fine                                
+                                                                                
+export default class SomeComponent extends React.Component {                    
+    constructor(props) {                                                        
+        super(props)                                                            
+        this.someFunction = this.someFunction.bind(this)                        
+    }                                                                           
+    someFunction() {                                                            
+        console.log(lodash) // Throws error that lodash is undefined.      
+    }                                                                           
+    render() {                                                                  
+      this.someFunction()                                                       
+      return (                                                                  
+        <h2>SomeComponent</h2>                                                  
+      )                                                                         
+    }                                                                           
+}                                                                               

....

class App extends Component {
....
   render() {
     return (
       <div className="container">
         <header>
+          <SomeComponent />
           <h1>Todo List ({this.props.incompleteCount})</h1>

....

在浏览器中打开网站，然后查看控制台日志：