Currently, the CSS bundler always hoists @import statements to the top of the file. Instead, if CSS exists both above and below an @import statement, the bundler should split the parent module into two parts and insert the dependency between them. Similarly, if an @import statement is at the bottom of a file, avoid hoisting the dependency but don't split the parent unless necessary.

Imagine a file tree like the following:

• models/
  • user.js
  • page.js
  • item.js

// Using import syntax
import {user, page, item} from './models/*'

// Using require syntax
const models = require('./models/*')

A must-have for any large application.

• Treat async import() syntax as "cut here"
• Keep shared modules in the same "chunk"

References:
https://parceljs.org/code_splitting.html
https://survivejs.com/webpack/building/code-splitting/

It's probably simple to write a Babel plugin to do this, and super useful to have baked into the bundler.

Different implementations:

• Brunch
  • Doesn't work with code splitting
• Parcel
  • Also has a css reloader
• Webpack
• StealJS

There are situations where two packages have the same API, but the implementations are for separate platforms. If you control each package, you could theoretically combine them and use .web.js and .ios.js for every file in the package (and possibly share some modules with common functions). But it may be easier to keep the implementations split between two packages and simply have the bundler determine which package should be used depending on platform (or maybe some other heuristic).

Unsure on what the API would look like for redirection. I'll update this issue at a later date.

Assuming a package's entry module is index.js in the root directory, using require('.') from a sibling module or require('..') from a module in a sub-directory is not correctly resolved.

Using ES modules, we can eliminate unused modules by statically analyzing the AST. There's probably an NPM package that does this.

We may also want to use babel-plugin-minify-dead-code-elimination to eliminate dead code within each module.

These things would only be done for production bundles, since parsing the AST on every change is slow unless we keep ASTs in memory like Parcel does (which may be something we do down the line).

The entry package (also known as "the application") should be able to specify a sourceRoot that allows require calls to avoid relative paths (eg: ../../utils/foo) in favor of paths like utils/foo.

Integrate the source-map library into JSCompiler, and enable inline source maps with Babel. We may need to use https://github.com/Rich-Harris/sorcery to get this working correctly.

Include plugin detection within src/plugins/*.js files, paired with which NPM package should be installed (global cache?) when a bundle needs the plugin.

Right now, the Babel, TypeScript, and SASS plugins are installed automatically, which is not ideal.

Support globbing (like @import 'mixins/*') in any language that compiles down to CSS.

Here's a repository that adds this functionality to SASS in particular.

Using git while the bundler is active is not without its issues.

When a merge conflict occurs within the package.json file of a dependency, the bundler will crash because of the syntax error caused by <<<.

Currently, only the entry package can use CSS plugins like Sass or PostCSS. We'll need to apply plugins from the bottom-up, where packages without dependencies are processed first. We may need a solution for packages that provide Sass variables to their parent packages (is that a popular thing to do?).

Bundle-ception, a bundle within a bundle, but no module system. When a package uses the "sub-bundle" plugin, all of its modules are combined into a single module. Each module will always appear above its parent modules. The modules which are only imported by an outside module will appear in the order they were imported. Duplicate require calls and import statements would need to be stripped, so the package can still be developed as if it's not being combined into a single module.

As a luxury feature, this would be awesome. For example, if the "postcss" property in package.json is changed, reload the postcss plugin for that package. Another example is reloading the babel plugin when a package's .babelrc changes.

Both JS and CSS minify: true option should be supported out-of-the-box.

JS: https://github.com/mishoo/UglifyJS2
CSS: https://github.com/ben-eb/cssnano