如何从外部访问webpack包（js）中的mobx对象

Question

我想访问在JSX文件中声明的对象（即MOBX对象）。我使用webpack将所有jsx文件捆绑到一个输出文件（bundle.js）中。但我想访问包文件中的一些函数和对象。我们如何做到这一点？

我webconfig.config.js

var webpack = require('webpack'); 
var path = require('path'); 

var buildDir = path.resolve(__dirname, './wwwroot/scripts'); 
var scriptsDir = path.resolve(__dirname, './Scripts'); 

var config = { 
    entry: { 
     main: scriptsDir + '/app' 
    }, 
    output: { 
     path: buildDir, 
     filename: 'bundle.js', 
     libraryTarget: 'var', 
     library: 'MyLibrary' 
    }, 
    externals: { 
    }, 
    debug: true, 
    // Important! Do not remove ''. If you do, imports without 
    // an extension won't work anymore! 
    resolve: { 
     extensions: ['', '.js', '.jsx'] 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       // Enable caching for improved performance during development 
       // It uses default OS directory by default. If you need 
       // something more custom, pass a path to it. 
       // I.e., babel?cacheDirectory=<path> 
       loaders: ['babel?cacheDirectory'], 
       exclude: /(node_modules)/ 
      } 
     ] 
    } 
}; 

module.exports = config; 

JSX文件

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var mobx = require('mobx'); 
var mobxReact = require('mobx-react'); 
var mobxDevtools = require('mobx-react-devtools'); 

mobx.useStrict(true); 

var todoFactory = function (title) { 
    var todo = { 
     id: Math.random(), 
     toggleStatus: mobx.action(function toggleStatus() { 
      todo.finished = !todo.finished; 
     }) 
    }; 
    mobx.extendObservable(todo, 
     { 
      title: title, 
      finished: false 
     } 
    ); 
    return todo; 
}; 

var todoListFactory = function() { 
    var todoList = { 
     addTodo: mobx.action(function addTodo(todo) { 
      todoList.todos.push(todo); 
     }), 
     addTodos: mobx.action(function addTodos(todos) { 
      todoList.todos = todoList.todos.concat(todos); 
     }) 
    }; 

    mobx.extendObservable(todoList, { 
     todos: [], 
     unfinishedTodoCount: function() { 
      return todoList.todos.filter(function (todo) { 
       return !todo.finished; 
      }).length; 
     } 
    }); 

    return todoList; 
}; 

var TodoListView = mobxReact.observer(function TodoListView() { 
    var devtools = mobxDevtools ? React.createElement(mobxDevtools.default) : null; 

    var listItems = this.props.todoList.todos.map(function (todo) { 
     return React.createElement(TodoView, { todo: todo, key: todo.id }); 
    }); 

    return React.createElement('div', null, 
     devtools, 
     React.createElement('ul', null, listItems), 
     'Tasks left: ' + this.props.todoList.unfinishedTodoCount 
    ); 
} 
); 

var TodoView = mobxReact.observer(
    React.createClass({ 
     displayName: 'TodoView', 
     render: function() { 
      var todo = this.props.todo; 
      return React.createElement('li', null, 
       React.createElement('input', { 
        type: 'checkbox', 
        checked: todo.finished, 
        onClick: this.selectHandler 
       }), 
       todo.title 
      ); 
     }, 
     selectHandler: function() { 
      this.props.todo.toggleStatus(); 
     } 
    }) 
); 

var store = todoListFactory(); 

store.addTodos([todoFactory('Get Coffee'), todoFactory('Write simpler code')]); 
store.todos[0].toggleStatus(true); 

var Practice = React.createClass({ 
    render: function() { 
     return (
      <div> 
       <TodoListView todoList={store} /> 
      </div> 
     ); 
    } 
}); 

module.exports = Practice; 

我的目标是能够从外部访问存储对象。类似于'MyLibrary.store'。这怎么可能？

感谢， 马文

Answer 1

1）如果存储对象未在入口点文件中定义，然后在一个入口点，你应该导入和导出存储对象。

// entry_point.js

... 
var store = require('./file_with_store').store; 
exports.store = store; 

后

，因为你已经添加library: 'MyLibrary'属性的配置的WebPack，您可以访问MyLibrary.store

2）如果存储对象allready in entry point file，then just add：

exports.store = store;