Support a mechanism to control the transpilation of nested dependencies
- 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
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