以视图 CommonJS 方式导入 fullPage.js

Question

我正在尝试在 Marionette 中编写一个简单的应用程序结构，从我在 Marionette.js 网站上找到的 Browserify 和 Grunt 框架开始：Here is the repo.

我以前没有使用过Marionette和Browserify，我还不太习惯ES2015语法。

如何导入插件，即 fullPage.js 以在视图中使用它？

这是我现在的view.js：

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

我已经用 npm 加载了它，并且已经在 "vendor" 中捆绑了它

我实际上正在寻找

的等价物

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

对于此视图。

我应该怎么做？

Answer 1

如果其他人有兴趣...

我是这样解决的：

1) 我通过 npm 安装了 browserify-shim。这使得 CommonJS 不兼容的文件可浏览器化（因为它是 fullPage.js 的情况）。

2) 添加到 package.json:

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

出于某种原因，它不会把我的整个路径带到 node_modules/ 文件夹，所以我不得不将 .js 文件复制到我的项目的根目录（在 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'
                ]
            }
        }
    }

在这里，我将 fullpage.js 添加到我在构建项目中使用的 app.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();
    }
});

就这些了

以视图 CommonJS 方式导入 fullPage.js

Importing fullPage.js in a view CommonJS way

javascript

browserify

marionette

fullpage.js