Solvedesbuild Vue.js support

Hey @evanw,

thank you for your package! ❤️

Is the Vue.js support still not planed #27? (in case of the react support)

16 Answers

✔️Accepted Answer

@yyx990803 I just added an API similar to what you proposed:

(async () => {
  const jsx = `
    import * as React from 'react'
    import * as ReactDOM from 'react-dom'

    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('root')
    );
  `

  // Start the esbuild child process once
  const esbuild = require('esbuild')
  const service = await esbuild.startService()

  // This can be called many times without the overhead of starting a service
  const { js } = await service.transform(jsx, { loader: 'jsx' })
  console.log(js)

  // The child process can be explicitly killed when it's no longer needed
  service.stop()
})()

It should now be possible to make use of esbuild's single-file transform ability from JavaScript as a library without the overhead of process creation. The complete API is documented in the TypeScript type definitions.

Other Answers:

Vue SFC/Template to JavaScript compilation is a completely different process from TS/ES syntax conversions or minifications. Vue's template syntax and SFC formats are framework proprietary and subject to version changes - unlike ES syntax which is a standard and a much slower moving target (TS changes happen mostly at the type checker level and syntax is also relatively stable).

More importantly, the way Vue templates are compiled need coordination with Vue's runtime to ensure correct runtime behavior, so it really doesn't make sense for esbuild to cover that.

What I do think esbuild can benefit Vue, and other JS projects in general, is exposing a way to consume esbuild from JavaScript without the overhead of starting a child process and reading/writing to disk for every file transform. An API that starts a long-living child process that can receive/send data from the Node.js main process. This allows other bundlers or dev systems (e.g. vite) to leverage esbuild as the underlying sub bundler / TS/JSX transformer / minifier much more efficiently.

The reason for this is because while esbuild is amazing, it's a black box that cannot interop with the JS ecosystem, and the bundling process doesn't allow pluggable transforms which is indispensable for building actual applications. My ideal system would be using Rollup as the bundler but esbuild for actual TS transforms and final minification.

@evanw fantastic! Thank you so much for the fast implementation.

I'm intending for esbuild to be a batch process of sorts. That's why it allows you to pass more than one file on the command line, so that many files can all be processed in one go. Is this not something that works for other bundlers or dev systems such as vite?

vite is a dev server, and it compiles source files on-demand when the browser sends in HTTP request for native ES module imports. So by nature it compiles every file in isolation without the possibility for batching.

I've been thinking a lot about a streaming protocol over stdin/stdout that would let you feed esbuild commands, and then esbuild would send the results back to you without touching disk. Would that be sufficient for this?

The limitation of that is you have to feed the esbuild process everything in one go - and as mentioned above, vite's model is by nature at odds with that. Even in the context of a bundler like Rollup, the transform for each source file is also isolated (every transform call can be async). So I imagine it would still incur the cost of a new child process on every transform.

This is the API I imagine would be useful:

const { startCompilerProcess } = require('esbuild')

;(async () => {
  const compiler = await startCompilerProcess()
  
  // under the hood, sends the buffer to esbuild for processing and sends back processed buffer
  // this can be called as many times as necessary without starting new child processes
  const compiled = await compiler.compile(srcBuffer, options).toString()

  compiler.dispose() // explicitly stop the child process (or auto exit on main process exit)
})()

I'm not very familiar with Go, but I imagine it should be a thin extra layer that doesn't affect how esbuild core works.

Related Issues:

154
esbuild Vue.js support
@yyx990803 I just added an API similar to what you proposed: It should now be possible to make use o...
16
esbuild Benchmark against SWC / pax
I fixed the random panic and ran it (Note: swc is a compiler There are bundlers in Rust: pax and swc...
7
esbuild Different strategy for installing platform-specific binaries
Starting from cnpm@7.1.0 no additional data will be downloaded and there will be no warnings 🎉 ...
4
esbuild Is there a way to install the tool using go get?
Well I was too naive to say that just moving go.mod and go.sub would do I inspected the project sour...
811
webpack Cannot assign to read only property 'exports' of object '#<Object>' (mix require and export)
The code above is ok You can mix require and export You can't mix import and module.exports. ...
727
webpack How to exclude node_modules but one
@borm: a solution: Subj as example I create some module in another folder ( /projects/MY_MODULE ) MY...
488
webpack nodejs 17: digital envelope routines::unsupported
workaround: Bug report What is the current behavior? Other relevant information: webpack version: 5....
473
webpack TypeError: Data must be a string or a buffer
Here is a workaround to help you to find the wrong import Using the latest 2.2.0 release although th...
296
webpack webpack 4: access the mode flag from webpack.config.js file
This seems to work correctly with --mode production -p and <no flag> Do you want to request a featur...
284
webpack Webpack gives $ is not defined or jQuery is not defined error in console
Just use like this or add to webpack Do you want to request a feature or report a bug? What is the c...
233
webpack Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
I got this same error reinstalled it locally and ran it with package scripts and it worked npm remov...
216
webpack "Uncaught SyntaxError: Unexpected token <" error happened sometimes
I have a same problem fix with added <base href=/ /> into the <head> of my index.html ...
180
webpack [BUG?] npm link causes Webpack to look for babel-plugin in linked package node_modules.
try to add resolve: { symlinks: false } to your webpack.config I've linked a package that is outside...
177
webpack Parsing of import() fails in 4.29.0 (Compilation issue, related to dynamic import)
Running these commands fixes the problem in your repro @Dbuggerx It seem to be a npm problem ...
166
webpack webpack watch mode not working....
Try this workaround: Add this to your webpack configuration file: General Information: webpack versi...
122
webpack webpack broken by ajv@6.9.0, "custom keyword definition is invalid: data.errors should be boolean"
If you use yarn add below to package.json then run yarn install if you use npm ...
106
webpack Webpack 2.0 doesn't support custom command line arguments?
Yes this is intended Custom argumens can be passed via --env prefix i e --env.compress ...
103
webpack error:'output.filename' is required, either in config file or as --output-filename"
exports not export,that is the reason. Do you want to request a feature or report a bug? bug What is...
97
parcel "Name already registered with serializer" with parcel@next
I was getting this issue after trying to switch from parcel-v1 to parcel-v2 Deleting node_modules an...
94
webpack DefinePlugin does not inject variable
Hmm I was just having this issue and it was trolling me process.env was showing as an empty object ...
84
parcel Cannot find module error when importing an static file using typescript
Create a .d.ts file in your project and put : It will instruct TypeScript to use any for all imports...
83
webpack Webpack moment.js integration
To the next person trying to get one of the above configurations to work (which they did not for me)...
82
webpack Strange warning stating that export does not exist when it does
Maybe this is not a bug Bug report What is the current behavior? Not sure if this is a problem with ...
78
parcel Bug: React not defined (with TypeScript)
I encountered this as well recently Using import * as React from 'react' worked for me Maybe you can...
77
parcel 🐛dist/ directory isn't cleaned on repeated builds
In package.json add another script named prebuild: prebuild will run automatically before the build ...
71
parcel Uncaught ReferenceError: regeneratorRuntime is not defined
how to solve ? If you are targeting modern browsers 🐛 bug report When I started using generators in...
69
webpack multiple usage of the CommonsChunkPlugin, only first works
The CommonsChunkPlugin selects only entry chunks Do you want to request a feature or report a bug? I...
67
webpack Using dynamic require on node targets WITHOUT resolve or bundle the target module
const server = __non_webpack_require__(entryPath) Do you want to request a feature or report a bug? ...
66
parcel Importing CSS from node_modules
I've been fighting with this for a while using .sassrc as a JSON object and yaml neither worked ...
64
webpack Webpack 4 chunking different runtime behaviour compared to Webpack 3
I stumbled upon such a configuration after trying many many variations Conceptually I'm not 100% sur...
63
webpack Error when trying to build bundle after upgrading to 4.20.0
Please read CHANGELOG https://github.com/webpack/webpack/releases/tag/v4.20.0 Update internal struct...
62
parcel How to reference a scss files installed to node_modules?
You could try your luck with the tilde operator (~) to reference node_modules For example: ...
60
webpack Using webpack 4 on a large project (or, how to avoid "JavaScript heap out of memory" with production mode)
For those looking to increase the memory used by webpack Do you want to request a feature or report ...
60
webpack Webpack 4.0 file-loader json issue
I was able to copy my .json config file to the build folder using this: Do you want to request a fea...
56
webpack Module not found: Error: Cannot resolve 'file' or 'directory' (import sass with a relative font folder in webpack)
Just had this problem too It's an error in finding the right directory Use the path relative to / In...
51
parcel JS and CSS files not found after parcel build
Sorry i forgot a dot try parcel build index.html --public-url ./ this is also documented on the doc ...
49
webpack import() support in webpack 2
import() reached stage-3 🎉 Domenic's import() proposal is as of last week stage-2 ...
49
webpack [NodeJS v.7] Webpack ERROR in Path must be a string. Received undefined
add a key 'publicPath' to the webpack config output node I'm update my node.js to version 7 ...
49
webpack BUG: "export 'default' (imported as 'selection_enter') was not found in './enter'
In case anyone stumbles across this thread.. Do you want to request a feature or report a bug? BUG W...
48
webpack Ability to export only module's default when building a library
Is seems this issue was solved by the libraryExport setting and should be closed. ...
48
webpack Error: Cannot find module 'webpack/lib/removeAndDo' when building a project
For me the issue was caused by extract-text-webpack-plugin module Older version of this package are ...
46
parcel CSS Module does not work
Currently you need to install postcss-modules in your app Thanks for your awesome tool ...
45
webpack require function is used in a way in which dependencies cannot be statically extracted
In case anyone else comes across this - I got this error because I was using module: umd in my tscon...
45
webpack Remove support for AMD by default in Webpack 2
You can opt-out Feel free to include a include property to limit the scope. I'm submitting a feature...
44
webpack module gets prioritised over main
I was having this exact problem Do you want to request a feature or report a bug? bug What is the cu...
43
webpack Webpack 4 hot rebuild time twice as slow
@Sojborg let try adding this line to the config: WARNING in configuration The 'mode' option has not ...
40
webpack node_modules/tapable/tapable"' has no exported member 'Tapable'.
This issue is not directly related to webpack 5 I am trying to build angular8 app with webpack5+ in ...
39
webpack "TypeError: Path must be a string" after break from project
Must be a node problem Downgraded to node 5.11.1 and it works Thanks for the help you can close 👍 ...
37
webpack When there's a broken sourcemap, error doesn't tell you which file it broke on
Are all of you using babili/babel-minify-webpack-plugin ? Do you want to request a feature or report...
36
parcel Make parcel ignore...
We have been using Parcel for less than a year One of the biggest and pretty much only struggle we h...