importing packages dependent on other packages

[catc]

How do you import .js files that require other files? I'm trying to import some packages from lodash, but the resolver is blowing up:

const app = new EmberApp(defaults, {
	nodeAssets: {
		lodash: {
			vendor: {
				destDir: 'lodash',
				include: ['mapValues.js']
			}
		}
	}
});

app.import('vendor/lodash/mapValues.js');

This should technically work, but since the lodash/mapValues.hs package requires:

var baseAssignValue = require('./_baseAssignValue'),
    baseForOwn = require('./_baseForOwn'),
    baseIteratee = require('./_baseIteratee');

I'm guessing that the file is copied to the vendor directory without resolving its dependencies which causes the ember-resolver to throw: Uncaught Error: Could not find module './_baseAssignValue' imported from '(require)'.

Is there any way around this?

[dfreeman]

Hi @catc,

This addon only deals with pulling in standalone JS files into a build. If you need additional logic (like building a dependency graph and concatenating modules together), you have two options:

• use something like broccoli-webpack or broccoli-rollup (with a CommonJS plugin) in the processTree hook
• drop ember-cli-node-assets completely and use something like ember-browserify

[catc]

Have you managed to do something like this before? Is it something along the lines of:

const Rollup = require('broccoli-rollup');
const commonjs = require('rollup-plugin-commonjs');
const nodeResolve = require('rollup-plugin-node-resolve');

nodeAssets: {
	lodash: {
		vendor: {
			destDir: 'lodash',
			include: ['mapValues.js'],
			processTree(input) {
				return new Rollup(input, {
					rollup: {
						plugins: [
							nodeResolve({ jsnext: true, main: true }),
							commonjs({ include: 'node_modules/**' })
						],
						entry: 'mapValues.js',
						dest: 'mapValues.js',
					}
				});
			}
		}
	}
}

app.import('vendor/lodash/mapValues.js');

Would I still need to specify the entry? And if I wanted multiple packages from lodash, say ['mapValues.js', 'findIndex.js'], then would I roll it up all into 1 bundle?

[dfreeman]

It's not the most beautiful thing in the world, but you could do something like this: https://github.com/dfreeman/node-assets-rollup-demo/commit/afa2a1d8b2ec4ae09700f0eec2777d1160dd75a7

I'm not a Rollup expert, so it's possible there's a cleaner way to export multiple modules from a bundle, but the gist of what's happening there is that it's generating a synthetic entry module that define()s the modules you want to expose to your Ember app's loader.

[catc]

Works great! Gonna see if I can clean it up more. Would be nice though if ember-cli would finally add node_module support.

[dfreeman]

I know the Glimmer app pipeline has (limited) support for this already—I think it uses Rollup for its bundling phase—so hopefully things are headed that direction overall.