use babel source instead of babel packages (@babel/*)

Question

I would like to embed babel in my project using source version ( github.com/babel ) instead of packaged version (npm @babel/* ) in order to benefits of a better (webpack) tree-shaking ( @babel/* is cjs whereas github.com/babel is mjs/ts/flow).

I use 3rd-party libraries that require node_modules/@babel/* and I would like to configure TypeScript to make it use node_modules/babel/packages/babel-*/src instead.

I am aware that there is no module alias in TypeScript.

I tried with compilerOptions.paths with no success:

    paths: {
        '@babel/code-frame': ['babel/packages/babel-code-frame/src'],
        '@babel/...': ['babel/packages/babel-.../src'],
        ...
    }

Is there a trick to make any require to @babel/* to point to babel/packages/babel-*/src ?

note: in my webpack configuration file, I use:

resolve: {
    alias: {
        '@babel/code-frame': 'babel/backages/babel-code-frame/src',

and I'm looking for the equivalent for typescript.

Related context: https://github.com/FranckFreiburger/vue3-sfc-loader/issues/7

(feel free to ask me more details if necessary)

Edit: I think the resolution of this question is doomed to failure since (AFAIK) TypeScript cannot import flow files. My only option is to wait the resolution of Migrate Babel from Flow to TypeScript PR.

Answer 1

You could use Lerna for that purpose. As long as some refactoring and extra work is ok for you.

---

What is Lerna? :

Lerna is a tool for managing JavaScript projects with multiple packages, as seen in Monorepos like Babel , react , material-ui , etc. Lerna optimizes the workflow around managing multi-package repositories with git and npm. Lerna can also reduce the time and space requirements for numerous copies of packages in development and build environments - normally a downside of dividing a project into many separate NPM packages. See the hoist documentation for details.

https://github.com/lerna/lerna

---

How is Lerna going to solve the initial problem? :

Your packages can depend on each other, which means that you can put your own babel packages into your repo, and let other packages depend on your "custom" Babel-Packages. You have to opt out from external Babel and put your desired Babel-Packages into your own manage packages folder. That will be alot of work, if you have different libs which will require different Babel versions. However if the versions are all the same, you can add Babel as a dependency on your Custom-Babel-Package. Be Careful to not mix them afterwards.

Let's assume that you have 2 packages:

• packages/module1
• packages/@babel-custom

In Lerna environments every packages has its own package.json . This allows us to add @babel-custom/core to the dependencies of your package (in our case module1/package.json

To add your package:

# Install module-1 to module-2
lerna add @babel-custom --scope=module1

More examples: https://github.com/lerna/lerna/tree/main/commands/add#readme

You can as well prevent installing dependencies like this: lerna bootstrap --hoist --nohoist=babel-* .

---

What about TreeShaking? :

After linking everything together with Lerna you can change your compilerOptions.paths to something like this:

"paths": {
      "@babel-custom/core": ["./packages/@babel-custom/src"]
}

Just to be clear, you can use wildcards. It is handy if you have multiple sub packages and want to reference them separately.

"paths": {
      "@babel-custom/core/*": ["./packages/@babel-custom/src/*"]
}

There is an article about that: https://rossbulat.medium.com/typescript-working-with-paths-packages-and-yarn-workspaces-6fbc7087b325 Sidenote: npm and yarn work both with this.

The last step is to prepare your packages/@babel-custom/index.js :

export { default as BabelPackage} from './BabelPackage';
export * from './BabelPackage';

Once you've installed the dependencies via Lerna, you can import or require them like this:

packages/module1/index.js :

// import syntax

import { BabelPackage } from '@babel-custom/core'; // named import, top level
import BabelPackage from '@babel-custom/core/BabelPackage'; // import, second level

// require syntax

const { BabelPackage } = require('@babel-custom/core');
const BabelPackage = require('@babel-custom/core/BabelPackage ');

---

If you want to learn more about optimizing your Bundle, you can read this: https://material-ui.com/guides/minimizing-bundle-size/

You might want to look into this Repo: https://github.com/mui-org/material-ui there is a babel package under packages/babel-plugin-unwrap-createstyles .