筆記meteor下使用material ui

在meteor官方下安裝的material ui版本較舊，所以改用npm來安裝material ui

在meteor + react環境下使用 material ui

npm裝包

meteor add meteorhacks:npm cosmos:browserify

備註：

meteorhacks:npm 負責把原生的npm包添加到meteor中應用運行，後續的packages.json文件就是由這個包生成的

browserify在客戶端中提供了require的功能

 

在packages.json文件中編輯，填入要安裝的原生npm包

（由 https://www.npmjs.com 提供）

{
  "material-ui": "0.14.0",
  "react-tap-event-plugin": "0.2.1",
  "externalify": "0.1.0"
}

 

新增 client/lib/app.browserify.js

在這個文件裡可以require任意已安裝的npm模塊，這樣可以導出成一個在這個項目內可全局使用的變量(指項目中的每一個javascript文件都能訪問這個變量)

在文件內下加入以下內容即可使用material ui

var injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();
mui = require('material-ui');

 

指定要使用的react

因為同時安裝了meteor和material ui(npm)的react包，所以以下是手動修改配置的方式

新增一個檔案 client/lib/app.browserify.options.json

{
  "transforms": {
    "externalify": {
      "global": true,
      "external": {
        "react": "React.require",
        // not necessary for react-router, but may be
        // needed for other libraries that requires react-dom
        "react-dom": "React.require"
      }
    }
  }
}

可參考react in meteor官方文檔 的4. Configure Browserify and transforms in app.browserify.options.json

修改完配置後運行 meteor  即可更新配置