Develop Reference

Publishing both es6 and commonjs with subfolders

I want to be able to import module from subfolder like this, without any lib folder, https://davidwells.io/blog/publishing-flat-npm-packages-for-easier-import-paths-smaller-consumer-bundle-sizes/
I want to publish both CommonJS and ES6 modules
I can specify the main file for commonjs with "main": "./index.js" and for es6 with "module": "./index.es.js" in package.json.
But how does it works when I import my-package/myfile ? Is myfile.js used or myfile.es.js
And why it isn't possible to specify a subfolder instead of a single main file ?

There's not a lot of magic going on in that blog post you mentioned, he's just asking for node_modules/his-module/P.js
The bundlers need a single entry because (in theory) that is where you have your
module.exports = {}
code which is what lets the bundlers access your functions.
If you are using an esmodule compatible bundler like webpack or rollup, they will read the module key
import someFunction from 'your-module';
Would import the es module unless you are using something like browserify which would take the commonjs version.
You can also ask explicitly for a different file
import someFunction from 'your-module/lib/index.min.js';
Whatever file you ask for here, it'll import that. If you add a / after your-module you are now breaking out of the main or module path conventions and asking for whatever file you want.

Javascript ES6 import without a name [duplicate]

This question already has answers here:
import module just to run it
(2 answers)
Closed 6 years ago.
I am running Webpack, Babel and Vue.js and I want to split up my entry file. Currently I have an app.js file which is the starting point to my application.
I have some bits and pieces of Code I want to put into a bootstrap.js file which I want to include in my main app.js file can I can have a clean file to start out with Vue and add components in it as I go.
Some examples of what I would want to put in my bootstrap.js file:
import messagesNL from './translations/nl';
Vue.use(VeeValidate, {
locale: 'nl',
dictionary: {
nl: {
messages: messagesNL
}
}
});
window.Vue = Vue;
So pretty much setup for plugins, global configuration, etc. I feel like this is not your typical module and I find it hard to create a module like structure for this file so I basically use this in my app.js file:
import bootstrap from './bootstrap';
Having no idea if this would work, it seems to just import everything neatly without me having done a module exports {} like syntax.
Now the bootstrap variable that I assigned to that file is unused in app.js since it's only used to require the file and my IDE kind of 'greys` it out to let me know it is unused.
Is there another syntax for this so that I don't have to assign a name to it? Is this approach ok to split up my file, or should I be doing something else?
I haven't put it into a proper module yet because then it would have it's own local scope and I would be unsure how to set up Vue with all the plugins, etc. If anybody has a better suggestion I am open to it.
Cheers.

To include a file without importing anything you can just drop the <name> from part of the statement:
import './bootstrap';
This will execute the target module without affecting the scope of the active module, but it may have side-effects such as declaring globals or modifying existing globals.
As stated in the MDN docs for Import a module for its side effects only:
Import an entire module for side effects only, without importing anything. This runs the module's global code, but doesn't actually import any values.
import '/modules/my-module.js';

Ember CLI import ES6 file to ember-cli-builds.js

So the ember-cli-builds.js file clearly states
// If the library that you are including contains AMD or ES6
// modules that you would like to import into your application
// please specify an object with the list of modules as keys
// along with the exports of each module as its value.
I'm importing regular javascript files this way
app.import('vendor/global.js');
but what is the proper way to "specify an object with the list of modules as keys along with the exports of each module as it's value"?

At the "AMD Javascript modules" heading of the guides, it is described like that:
Provide the asset path as the first argument, and the list of modules
and exports as the second.
app.import('bower_components/ic-ajax/dist/named-amd/main.js', {
exports: {
'ic-ajax': [
'default',
'defineFixture',
'lookupFixture',
'raw',
'request'
]
}
});
You can now import them in your app. (e.g. import { raw as icAjaxRaw } from 'ic-ajax';)
Reference From Guide

The selector answer is for older ember, pre ember-auto-import (webpack), and pre Ember Octane.
In modern ember, after npm installing a package, you'll be able to import directly from that package.
Example:
npm install qs
then anywhere in your app
import qs from 'qs';
related, it is recommended to avoid placing files in the vendor folder that you want to integrate with the module system. the vendor exists outside of the bundle, so if you have a standalone module, you can place it in your app folder, maybe under some descriptive folder:
app/external-modules/global.js, allowing you to import from it like:
import * as globalStuff from '<my-app>/external-modules/global';

How can I bundle JavaScript files under /vendor in an ember-cli project?

Let's say I have an ES6 library "foo" under my /vendor directory in an EmberJS project constructed using the latest ember-cli (at the time of this writing 2.4.3). Assume that foo is a library with multiple files, e.g. bar.js, baz.js, etc. and they all export something.
I would like to take vendor/foo/bar.js, vendor/foo/baz.js, etc. and bundle them into a distribution file, e.g. vendor/foo/dist/foo-bundle.js that I can then import into Ember with:
app.import("vendor/foo/dist/foo-bundle.js");
This appears like it should be possible with a bundler and/or transpiler (like Babel), but it isn't clear to me what tools I should use and in what combination. Does Ember have a built in tool for doing what I want through ember-cli (if it does, I must be blind)? Should I be using an external bundler like webpack, browserify, or rollup?
In general there seems to be a lot of noise around JavaScript tooling making it difficult for me to understand what choices I have for this problem and how to properly leverage them. Any assistance would be greatly appreciated.
Some notes that may be helpful...
I have tried a few things, so far:
I have tried just importing the main.js file, in hopes that EmberJS would also walk the dependency tree and import any other files that were referenced in import statements. This only imported the main.js file and no other dependencies.
I've looked at broccoli-es6modules and had errors when running it, but it also uses esperanto which is deprecated in favor of rollup.
I've also tried using rollup directly, with a minor degree of success, but often times my bundle.js output is empty and doesn't include the code from bar.js or baz.js because I've only imported them in the entry point (e.g. main.js):
main.js
-------
import bar from './bar.js';
import baz from './baz.js';
bar.js
------
export default function bar() {
...
}
baz.js
------
export default function baz() {
...
}
I have found if my main.js includes a function that calls either code from bar or baz I get more than an empty bundle, but if foo is just a collection of scripts from a third-party vendor that have no "application entry point", aside from what amounts to something like a manifest file, rollup seems to be the wrong choice for what I'm looking for.
Thanks again!

(Updated with the latest options.)
There are a few options.
If baz.js and bar.js are your own modules and code, the best if you just place them in app/my-awesome-module folder. You can use ES6 import to import in other place, where you would like to use them. Ember CLI will transpile, concatenate and minify them automatically.
If you would like to use 3rd party modules or solutions, check out http://emberobserver.com, most of the popular library already converted to Ember Addon, so you can install them with ember install.
Use ember-auto-import in your project and import libraries as normal ES6 module like this: import MyCoolModule from "my-cool-module";

EcmaScript 6 module requiring, how does it work?

So I know how to require and export modules in ES6. But for frameworks like Aurelia, the docs say that you require aurelia like so:
import {LogManager} from 'aurelia-framework';
Do I have to place a JS file named aurelia-framework in the folder where the JS file I'm executing it from resides, or does the import function work similiar to the require function in NodeJS/CommonJS?

According to this article ES6 modules spec only deals with loading modules that are present in the file path. Downloading these files (via NPM or by other means) is outside of scope of ECMAScript 6 modules spec. Nothing is said in the spec about supporting npm package includes (traversing the directory structure down to the /, one directory at a time, looking for a package.json file and then searching within the node_modules directory where package.json file is found). So while the import syntax is similar to commonJS style, the whole magic of looking for modules in the node_modules directory is not included.
So for your example to work, aurelia-framework must be a javascript file somewhere in your file system and it should contain an exports statement.
import {LogManager} from 'aurelia-framework'; // ./aurelia-framework.js
import {LogManager} from '../libs/aurelia-framework'; // ../libs/aurelia-framework.js

with Aurelia, you can install dependent libraries using jspm. you can see an example of that here. jspm will get the packages for you and bring them into subfolders in your project. jspm uses an index (stored in config.js) to know where to locate the files (similar to how requirejs, but works for amd, commonjs, and es6 modules).
there is also an example of using the aurelia libraries with requirejs amd loader. this example uses a bundle of aurelia libraries generated by r.js as shown here