Can not browserify materialize-css npm module

Question

我是实现css框架的新手。我正在使用laravel-elixir 4.0.0来浏览已安装的npm materialize-css模块。

这里是我的配置

的package.json

{ 
    "private": true, 
    "devDependencies": { 
    "gulp": "^3.8.8" 
    }, 
    "dependencies": { 
    "jquery": "^2.2.0", 
    "laravel-elixir": "^4.0.0", 
    "materialize-css": "^0.97.5" 
    } 
} 

gulpfile.js

var gulp = require('gulp'); 
var elixir = require('laravel-elixir'); 

/* 
|-------------------------------------------------------------------------- 
| ELIXIR ASSET MANAGEMENT 
|-------------------------------------------------------------------------- 
*/ 

elixir.config.sourcemaps = true; 

// Set the path for compiled assets 
var build_path = "public/compiled/"; 

elixir(function(mix) { 

    /* 
    |---------------------------------------------------------------------- 
    | Javascript browserification 
    |---------------------------------------------------------------------- 
    */ 
    mix.browserify(
     "app.js", 
     build_path + "app.js" 
    ); 
}); 

app.js

window.$ = window.jQuery = require('jquery') 
require('materialize-css'); 

然而，当我运行一饮而尽命令返回以下错误： -

一饮而尽-通知：Laravel药剂] Browserify失败！：找不到模块 从 'jQuery的'“在/ var/WWW/laravel5/node_modules /兑现，CSS/bin'的

我的节点版本： - 节点V5.6.0，NPM V3.6.0

Answer 1

注意：我没有使用Elixir。只有Gulp，browserify和materialize-css。

这是我使用materialize-css在我的项目：

• 在package.json我已经加入到devDependencies列表browserify-shim，并进行配置

  ：在app.js文件

  "dependencies":{ 
      "materialize-css": "xx.yy.zz", 
      "jquery": "xx.yy.zz", 
      ... 
  }, 
  "devDependencies": { 
      "browserify": "xx.yy.zz" 
      "browserify-shim": "xx.yy.zz" 
      ... 
  }, 
  "browser": { 
      "jquery": "./node_modules/jquery/dist/jquery.js", 
      "materialize": "./node_modules/materialize-css/bin/materialize.js" 
  }, 
  "browserify-shim": { 
      "jquery": "$", 
      "materialize": "materialize" 
  }, 
  "browserify": { 
      "transform": [ 
      "browserify-shim" 
      ] 
  }, 
  ... 
  

• 然后像往常一样导入jQuery和materialize：

  var $ = require('jquery'); 
  require('materialize'); 
  

然后，只需使用常规食谱gulp和browserify打造他们。