ビュー内のfullPage.jsの読み込みCommonJSの方法

Question

私はMarionetteの簡単なアプリケーション構造を、Marionette.jsのWebサイトで見つけたBrowserifyとGruntのスケルトンから始めようとしています：Here is the repo。

以前はMarionetteとBrowserifyを使用していませんでしたが、ES2015の構文にはあまり慣れていません。

プラグインをインポートするには、つまり、fullPage.jsをビューで使用するにはどうすればよいですか。私は実際に

の同等を探しています

私はNPMでそれをロードした

import {Marionette} from '../../../vendor/vendor'; 
import template from '../../templates/homepage.jst'; 
export default Marionette.View.extend({ 
    el: '#app', 
    template: template 
}); 

、すでに「ベンダー」で、それを同梱：

これが今の私のview.jsです

<script src="node_modules/fullpage.js/dist/jquery.fullpage.min.js></script> 

このビューには、

どうすればよいですか？

Answer 1

誰が興味を持っている場合...

私はこのようにそれを解決：私はNPM経由browserify-shimをインストール）

1。これにより、CommonJSの互換性のないファイルがブラウザー可能になります（fullPage.jsの場合）。それはnode_modules/フォルダに私の全体のパスを取ることはないいくつかの理由について

"browser": { 
    "fullpage1": "./jquery.fullpage.min.js" 
}, 
"browserify-shim": { 
    "fullpage1": { "depends": [ "jquery" ] } 
}, 
"browserify": { 
    "transform": [ "browserify-shim" ] 
} 

ので、私はルートに.jsファイルをコピーする必要がありました：

2）package.jsonに追加しました私のプロジェクトの（パッケージの隣、とGruntfile.jsの横）。 なぜ誰かがそれがうまくいかない理由を理解したら、node_modulesフォルダーと思うと非常にいいですね。

3）Gruntfile.jsにこれを追加しました：

ここ

grunt.initConfig({ 
    browserify: { 
     dist: { 
      options: { 
       transform: [ 
        ['babelify', { 
         'presets': ['es2015'] 
        }], 
        ['jstify'] 
       ] 
      }, 
      files: { 
       './public/app.js': [ 
        './app/initialize.js', 
        './jquery.fullpage.min.js' 
       ] 
      } 
     } 
    } 

を私は構築されたプロジェクトで使用していapp.jsにfullpage.jsを追加しています。最後に

4）私は、私の見解でレンダリングにこれを追加しました：

import {Marionette} from '../../../vendor/vendor'; 
import template from '../../templates/homepage.jst'; 

export default Marionette.View.extend({ 
    el: '#app', 
    template: template, 
    onRender: function() { 
     $('.fullpage').fullpage(); 
    } 
}); 

そして、それは私が再同じ問題を抱えていたすべての