An Ember resolver for use with webpack
JavaScript CoffeeScript HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test Update test suite Jan 3, 2014
.gitignore ignore tmp build folder Jan 3, 2014
Gruntfile.coffee Also watch index.js Jan 3, 2014
README.md v1.0.0 Nov 2, 2016
bower.json Update bower deps Jan 3, 2014
index.js Perf and support Ember pod like structure Sep 22, 2017
package.json v1.1.0 Sep 22, 2017

README.md

ember-webpack-resolver

An Ember.js resolver heavily inspired by https://github.com/stefanpenner/ember-jj-abrams-resolver but mainly for use with webpack.

Install

npm install ember-webpack-resolver --save-dev

Usage

This resolver is intended to resolve modules with a folder structure like such:

| - app/
| --- components/
| --- controllers/
| --- models/
| --- routes/
| --- templates/
| --- views/
| --- app.js
| --- router.js
| - node_modules/
| --- some-widget-ember-component
| ----- index.js
| ----- index.hbs
| - bower_components/
| --- some-other-ember-component
| ----- index.js
| ----- index.hbs

A very simple config will resolve just your local modules:

var App = Ember.Application.create({
  Resolver: require('ember-webpack-resolver?' + __dirname)()
});

If you're using a file extension other than .js, supply the lookup extensions such use with coffeescript:

var App = Ember.Application.create({
  Resolver: require('ember-webpack-resolver?' + __dirname)({
    extensions: ['.coffee', '.hbs']
  })
});

Custom Lookup Patterns

If you have a custom module type that you need to resolve, use the lookupPatterns option. It takes an array of functions with each function receiving a parsedName argument. The function optionally returns a moduleName value based on some criteria.

var reactModuleFilter = function(parsedName) {
  if (parsedName.type === 'react') {
    return './react/' + parsedName.fullNameWithoutType
  }
}

var App = Ember.Application.create({
  Resolver: require('ember-webpack-resolver?' + __dirname)({
    extensions: ['.coffee', '.hbs'],
    lookupPatterns: [reactModuleFilter]
  })
});

Resolving Components

If you want to also resolve modules within vendor folders, a bit more configuration is required:

var App = Ember.Application.create({
  Resolver: require('ember-webpack-resolver?' + __dirname)({
    components: {
      'some-widget': require('some-widget-ember-component'),
      'other-widget': require('some-other-ember-component')
    }
  })
});

Then it will resolve to the specified module when inserted into your template:

<h1>{{some-widget value="Hooray!"}}</h1>
<p>{{#other-widget}}Stuff{{/other-widget}}</p>

To resolve modules within the bower_components folder, be sure to add the folder to your webpack config:

module.exports = {
  // ...
  resolve: {
    moduleDirectories: ["node_modules", "bower_components"]
  }
};

Release History

  • 1.0.0 - Support for returning Ember classes with lookupPatterns.
  • 0.3.0 - simplify resolving components
  • 0.2.0 - handle nested components, update API
  • 0.1.0 - initial release

License

Copyright (c) 2013 Kyle Robinson Young
Licensed under the MIT license.