babel / babel/babel-loader

Support a mechanism to control the transpilation of nested dependencies

Open
#764 0 comments 13 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
4.8k
Forks
456
Avg merge
9h 19m
Merged PRs (30d)
2

Description

**I'm submitting a feature request**

**Webpack Version:**
4.6.0

**Babel Core Version**:
7.1.6

**Babel Loader Version**:
8.0.4

**Please tell us about your environment:**
macOS 10.13.6

**Current behavior:**
I'm using our internal Vue UI framework, which is currently in development: [vue-ui](https://github.com/dreipol/vue-ui/). The framework has a subdependency to [bianco.viewport](https://github.com/biancojs/viewport).
As both modules don't transpile their code by themselves, we instruct `babel-loader` to transpile them for us:

```js
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: excludeNodeModulesExcept(['@dreipol/vue-ui']),
loader: 'babel-loader',
},
],
},
};
```

The problem now arises with legacy browsers (IE11). As I've come to realize, webpack has no problems resolving the sub dependency. However, `babel-loader` doesn't realize that this sub dependency must be transpiled as well.

A tested quick fix is to also include `bianco.viewport`. However this is not feasible when more sub dependencies are added. Also, the requesting code would need to be aware of the full dependency tree to include all dependencies that need transpilation like that.

**Expected/desired behavior:**
Ideally, there's a way via `babel.config.js` or `.babelrc` or webpack or this loader to instruct babel which dependencies need to be transpiled, without knowing the dependency tree.
As those dependencies ar under our control, the solution doesn't necessarily involve only code changes in the root repository.

**What is the motivation / use case for changing the behavior?**
As I understand it, babel7 had in mind to transpile code in a manner that is project specific and not specific to the module that provides compiled code. Without having a way to handle sub dependency transpilation in a similar fashion as webpack treats sub dependency resolving, there's no clear way to include source code from modules without compilation.

Contributor guide

Open the contributing guide

Research direction

Start with the webpack rule and the babel.config.js or .babelrc options described in the issue, then inspect how babel-loader determines which node_modules files to process. Define a mechanism that transpiles eligible nested dependencies without listing the full dependency tree, and verify it with a nested dependency setup targeting IE11.

Written by the indexing model from the issue text.

Assessment

Tech stack
babel, javascript, webpack
Domain
build-system
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.