外部からwebpack bundle（js）のmobxオブジェクトにアクセスする方法

Question

JSXファイルで宣言されているオブジェクト（つまりMOBXオブジェクト）にアクセスしたいと思います。 webpackを使用して、すべてのjsxファイルを1つの出力ファイル（bundle.js）にバンドルしました。しかし、私はバンドルファイル内のいくつかの関数とオブジェクトにアクセスしたい。どうやってこれをやることができるの？

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; 

私の目標である

マイ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ファイルが外部ストアオブジェクトにアクセスできるようにします。 「MyLibrary.store」のようなものです。どのようにこれを可能にすることができますか？

おかげで、 マーヴィン

Answer 1

1）ストアオブジェクトは、エントリポイントファイルで定義されていない場合は、エントリポイントに、あなたはストアオブジェクトをインポートおよびエクスポートする必要があります。あなたはWebPACKのコンフィグにlibrary: 'MyLibrary'プロパティを追加しているので、

//、その後

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

をentry_point.js、あなたはMyLibrary.store

2）ストアオブジェクトがあればアクセスすることができますすでにエントリポイントファイルに入っている場合は、次のように追加してください：

exports.store = store;