How to set up Marionette.js with Webpack using Marionette Integrations?

Marionette Integrations provides a dedicated Webpack example in the repository with configuration files and a working app. You can clone the webpack directory or use the Yeoman generator command 'yo marionette-integrations:app --webpack' to scaffold it, which includes loaders for JavaScript and assets.

Marionette Integrations vs Marionette CLI: which should I use?

Marionette Integrations offers example apps with various build and test tools for flexibility, while Marionette CLI is a simpler CLI tool for generating basic Marionette.js apps. Use Integrations if you need specific toolchain configurations; CLI for quicker, more opinionated setups.

Is the Yeoman generator for Marionette Integrations stable for production?

The README indicates the Yeoman generator is 'not released yet,' so it might be in beta or unstable. Check the GitHub repository for recent updates or issues before using it in production environments to avoid potential problems.

How to add Cypress testing to my Marionette.js project with this?

Refer to the Cypress example in the repository, which includes configuration files and sample tests. You can copy the setup or use the generator with 'yo marionette-integrations:app --cypress' to bootstrap a project with Cypress integrated.

Does Marionette Integrations support TypeScript or modern ES6+ features?

The README does not mention TypeScript or specific ES6+ setups in the listed examples. While you can modify the configurations, out-of-the-box, it focuses on vanilla JavaScript, so additional configuration is needed for TypeScript or advanced transpilation.

What's the difference between the Browserify and Webpack examples here?

The Browserify example uses Browserify for module bundling, often paired with Grunt or Gulp for tasks, while Webpack offers a more integrated system with features like code splitting. Webpack is generally more powerful and modern, but Browserify might be simpler for legacy projects.

Open-Awesome

Marionette-Integrations

JavaScript

A collection of starter kits and examples for building Marionette.js applications with various build tools and test frameworks.

GitHub

118 stars112 forks0 contributors

What is Marionette-Integrations?

Marionette Integrations is a collection of starter kits and example applications for the Marionette.js JavaScript framework. It demonstrates how to integrate Marionette.js with various build tools like Webpack, Brunch, and Browserify, as well as testing frameworks like Mocha, Jasmine, and Cypress. The project provides ready-to-use code to help developers quickly set up and structure their Marionette.js projects.

Target Audience

Frontend developers building applications with Marionette.js who need reference implementations for build tool configurations and testing setups. It's particularly useful for teams adopting Marionette.js and seeking standardized project bootstrapping.

Value Proposition

It offers a centralized set of canonical examples that reduce configuration time, ensure best practices, and provide a quick start for any Marionette.js project with a chosen toolchain. The included Yeoman generator further accelerates project scaffolding.

Overview

A collection of starter kits for building Marionette Applications

Use Cases

Best For

Quickly bootstrapping a new Marionette.js application with a preferred build tool
Learning how to integrate Marionette.js with Webpack, Brunch, or Browserify
Setting up testing for a Marionette.js app with Karma, Mocha, Jasmine, or Cypress
Finding reference implementations for Marionette.js project structure
Standardizing development setups across a team using Marionette.js
Exploring different build and test configurations before committing to one

Not Ideal For

Developers using modern JavaScript frameworks like React or Vue instead of Marionette.js
Teams needing production-ready application templates with built-in UI components and advanced features
Projects that prioritize minimal setup and avoid complex build tool configurations
Environments where Node.js and Yeoman tooling are not available or permitted

Pros & Cons

Pros

Comprehensive Build Tool Examples

The README lists integrations with Webpack, Brunch, Browserify, and variants with Grunt or Gulp, providing a wide range of options for developers to choose from.

Extensive Testing Framework Support

Includes examples with Karma, Mocha, Chai, Jasmine, Cypress, and CasperJS, covering unit and end-to-end testing needs for Marionette.js applications.

Yeoman Generator for Rapid Scaffolding

Offers a command-line generator to quickly create any example application, though the README notes it's not yet released, which may affect stability.

Ready-to-Run Reference Implementations

Each example is a complete, working application that serves as a practical starting point or reference, reducing setup time and ensuring best practices.

Cons

Unreleased Yeoman Generator

The README explicitly marks the Yeoman generator as 'not released yet,' which could lead to instability, bugs, or lack of official support for users.

Tied to Legacy Framework Ecosystem

Marionette.js is based on Backbone, which has a declining community and less active development compared to modern frameworks, potentially limiting long-term viability.

Potentially Outdated Tool Versions

Examples like Webpack2 are included, which might not reflect current versions or best practices, as Webpack has evolved to newer releases with different configurations.

Frequently Asked Questions

Related Projects

Todo List

Helping you select a JavaScript framework - Todo apps for React.js, Angular, Vue and many more

Stars28,940

Forks13,739

Last commit1 month ago

Streamus

A YouTube video player as a Google Chrome extension

Stars1,069

Forks211

Last commit4 years ago

Marionette Gentle Introduction

Source code for the "Backbone.Marionette.js: A Gentle Introduction" book available at https://leanpub.com/marionette-gentle-introduction

Stars341

Forks177

Last commit10 years ago

Marionette Wires

:shipit: An opinionated example application built with Marionette.js.

Stars322

Forks78