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

Question

在Meteor中，如果我在反应组件和console.log中输入nod这样的npm，在以下位置输入“lodash”，它总是会在组件中定义为undefined。同样的事情也发生在一瞬间。我在我的智慧结束，因为从文档说什么我认为这是可能的。这是可能的，如果有的话，我在这里错过了什么？任何帮助深表感谢。

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

我把你的组件放到流星的例子中，它工作的很好。

例如

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

然后添加以下/imports/ui/App.jsx在此DIFF：

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> 

.... 

打开网站浏览器，并检查控制台日志：