├── .editorconfig
├── .gitignore
├── .prettierrc
├── license
├── package.json
├── readme.md
└── src
└── index.js
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | indent_style = tab
5 | indent_size = 4
6 | end_of_line = lf
7 | charset = utf-8
8 | trim_trailing_whitespace = true
9 | insert_final_newline = true
10 |
11 | [*.yml]
12 | indent_style = space
13 | indent_size = 2
14 |
15 | [*.md]
16 | indent_style = space
17 | trim_trailing_whitespace = false
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | npm-debug.log
3 | yarn.lock
4 | package-lock.json
5 | .DS_Store
6 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "singleQuote": true,
3 | "trailingComma": "none",
4 | "arrowParens": "avoid",
5 | "printWidth": 90
6 | }
7 |
--------------------------------------------------------------------------------
/license:
--------------------------------------------------------------------------------
1 | ISC License
2 |
3 | Copyright (c) Antoine Boulanger (https://github.com/ABXlink)
4 |
5 | Permission to use, copy, modify, and/or distribute this software for any
6 | purpose with or without fee is hereby granted, provided that the above
7 | copyright notice and this permission notice appear in all copies.
8 |
9 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
10 | WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
11 | MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
12 | ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
13 | WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
14 | ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
15 | OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
16 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "esbuild-plugin-babel",
3 | "version": "0.2.3",
4 | "description": "Babel plugin for esbuild.",
5 | "repository": "nativew/esbuild-plugin-babel",
6 | "author": "Antoine Boulanger (https://github.com/antoineboulanger)",
7 | "license": "ISC",
8 | "exports": "./src/index.js",
9 | "main": "src/index.js",
10 | "type": "module",
11 | "scripts": {
12 | "format": "prettier --write --ignore-unknown '**/*'"
13 | },
14 | "peerDependencies": {
15 | "@babel/core": "^7.0.0"
16 | },
17 | "devDependencies": {
18 | "@babel/core": "7.13.10",
19 | "prettier": "^2.2.1"
20 | },
21 | "files": [
22 | "src"
23 | ],
24 | "keywords": [
25 | "babel",
26 | "esbuild",
27 | "esbuild-plugin"
28 | ]
29 | }
30 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | # esbuild-plugin-babel
4 |
5 | [Babel](https://github.com/babel/babel) plugin for [esbuild](https://github.com/evanw/esbuild).
6 |
7 |
8 |
9 | First, check if [esbuild supports](https://esbuild.github.io/content-types/) the transform you need _(it's faster)_.
10 | If not, you can add the Babel plugin you need with this plugin.
11 |
12 |
13 |
14 | ### Install
15 |
16 | ```zsh
17 | npm install esbuild-plugin-babel -D
18 | ```
19 |
20 |
21 |
22 | ### Use
23 |
24 | `esbuild.config.js`
25 |
26 | ```js
27 | import esbuild from 'esbuild';
28 | import babel from 'esbuild-plugin-babel';
29 |
30 | esbuild
31 | .build({
32 | entryPoints: ['index.js'],
33 | bundle: true,
34 | outfile: 'main.js',
35 | plugins: [babel()],
36 | // target: ['es5'] // if you target es5 with babel, add this option
37 | })
38 | .catch(() => process.exit(1));
39 | ```
40 |
41 | `package.json`
42 |
43 | ```json
44 | {
45 | "type": "module",
46 | "scripts": {
47 | "start": "node esbuild.config.js"
48 | }
49 | }
50 | ```
51 |
52 |
53 |
54 | ### Configure
55 |
56 | `esbuild.config.js`
57 |
58 | ```js
59 | babel({
60 | filter: /.*/,
61 | namespace: '',
62 | config: {} // babel config here or in babel.config.json
63 | });
64 | ```
65 |
66 | [`babel.config.json`](https://babeljs.io/docs/en/configuration)
67 |
68 | ```json
69 | {
70 | "sourceMaps": "inline",
71 | "presets": [...],
72 | "plugins": [...]
73 | }
74 | ```
75 |
76 |
77 |
78 | ### Check
79 |
80 | [esbuild-serve](https://github.com/nativew/esbuild-serve) → Serve with live reload for esbuild.
81 |
82 | [esbuild-plugin-pipe](https://github.com/nativew/esbuild-plugin-pipe) → Pipe esbuild plugins output.
83 |
84 | [esbuild-plugin-svg](https://github.com/nativew/esbuild-plugin-svg) → Svg files import plugin for esbuild.
85 |
86 | [esbuild-plugin-postcss-literal](https://github.com/nativew/esbuild-plugin-postcss-literal) → PostCSS tagged template literals plugin for esbuild.
87 |
88 |
89 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import babel from '@babel/core';
2 | import fs from 'fs';
3 | import path from 'path';
4 |
5 | const pluginBabel = (options = {}) => ({
6 | name: 'babel',
7 | setup(build, { transform } = {}) {
8 | const { filter = /.*/, namespace = '', config = {} } = options;
9 |
10 | const transformContents = ({ args, contents }) => {
11 | const babelOptions = babel.loadOptions({
12 | ...config,
13 | filename: args.path,
14 | caller: {
15 | name: 'esbuild-plugin-babel',
16 | supportsStaticESM: true
17 | }
18 | });
19 | if (!babelOptions) return { contents };
20 |
21 | if (babelOptions.sourceMaps) {
22 | const filename = path.relative(process.cwd(), args.path);
23 |
24 | babelOptions.sourceFileName = filename;
25 | }
26 |
27 | return new Promise((resolve, reject) => {
28 | babel.transform(contents, babelOptions, (error, result) => {
29 | error ? reject(error) : resolve({ contents: result.code });
30 | });
31 | });
32 | };
33 |
34 | if (transform) return transformContents(transform);
35 |
36 | build.onLoad({ filter, namespace }, async args => {
37 | const contents = await fs.promises.readFile(args.path, 'utf8');
38 |
39 | return transformContents({ args, contents });
40 | });
41 | }
42 | });
43 |
44 | export default pluginBabel;
45 |
--------------------------------------------------------------------------------