Блог

Я пытаюсь написать простую структуру приложения в Marionette, начиная с Browserify и Grunt skeleton, которые я нашел на Marionette.js веб-сайт: Вот репозиторий.

Я раньше не использовал 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 и уже включил в «поставщик»

На самом деле я ищу эквивалент

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

для этого представления.

Как я должен это сделать?

Если кому-то еще интересно…

Я решил это следующим образом:

1) Я установил browserify-shim через npm. Это делает файлы, несовместимые с 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_modulesnode_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();
    }
});
  

И это все