plugins VS esbuild

But when I start a production bundling + build process, which I guess is actually made with rollup, I see Unexpected token (Note that you need plugins to import files that are not JavaScript). Lookin around, it seems like this is a rollup error, not a vite error.

rollup v3.2.3 bundles ./src/index.js → dist/bundle.js... babelHelpers: 'bundled' option was used by default. It is recommended to configure this option explicitly, read more here: https://github.com/rollup/plugins/tree/master/packages/babel#babelhelpers [!] (plugin commonjs--resolver) SyntaxError: Unexpected token (12:2) in /Users/krishna404/codeProjects/All_SmartAgent/desktopSmartAgent/src/index.js src/index.js (12:2) 10: import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'; 11: ReactDOM.render( 12: ^ 13:

Next, we need to tell Rollup which of the modules used in our code are external to our library. Together with @rollup/plugin-node-resolve, this ensures that Rollup doesn't bundle those dependencies into our final bundle. The function makeExternalPredicate() generates the list of package names specified in dependencies and peerDependencies in package.json. All credit for this and a big thank you goes out to Mateusz Burzyński for providing it in this issue:

// If you have external dependencies installed from // npm, you'll most likely need these plugins. In // some cases you'll need additional configuration - // consult the documentation for details: // https://github.com/rollup/plugins/tree/master/packages/commonjs resolve({ browser: true, dedupe: ['svelte'], }), commonjs(), // In dev mode, call `npm run start` once // the bundle has been generated !production && serve(), // Watch the `public` directory and refresh the // browser on changes when not in production !production && livereload('public'), // If we're building for production (npm run build // instead of npm run dev), minify production && terser(), ], watch: { clearScreen: false, },

Then in this case, if you don't want to use Vite's dynamic imports, you can conditionally use this plugin in your vite config under rollupOptions. https://github.com/rollup/plugins/tree/master/packages/inject. This way you won't even need to use env vars.

compilerOptions: { // enable run-time checks when not in production dev: !production } }), // we'll extract any component CSS out into // a separate file - better for performance css({ output: 'bundle.css' }), // If you have external dependencies installed from // npm, you'll most likely need these plugins. In // some cases you'll need additional configuration - // consult the documentation for details: // https://github.com/rollup/plugins/tree/master/packages/commonjs resolve({ browser: true, dedupe: ['svelte'] }), commonjs(), // In dev mode, call \npm run start` once // the bundle has been generated !production && serve(), // Watch the `public` directory and refresh the // browser on changes when not in production !production && livereload('public'), // If we're building for production (npm run build // instead of npm run dev), minify production && terser() ], watch: { clearScreen: false } };`

You should submit an issue there: https://github.com/rollup/plugins/tree/master/packages/commonjs

In Webpack 5, this is (surprisingly) simple to setup. Parcel 2 handles this out of the box with a special import prefix. Rollup has an official plugin.

The only workaround to have an isomorphic __dirname or __filename to be used for both "cjs" and "esm" without using build-time tools like @rollup/plugin-replace or esbuild "define" would be using a library like filedirname that does a trick inspecting error stacks, it's clearly not the cleanest solution.

import svelte from 'rollup-plugin-svelte'; import commonjs from '@rollup/plugin-commonjs'; import resolve from '@rollup/plugin-node-resolve'; import livereload from 'rollup-plugin-livereload'; import { terser } from 'rollup-plugin-terser'; import css from 'rollup-plugin-css-only'; import sveltePreprocess from 'svelte-preprocess'; const production = !process.env.ROLLUP_WATCH; function serve() { let server; function toExit() { if (server) server.kill(0); } return { writeBundle() { if (server) return; server = require('child_process').spawn( 'npm', ['run', 'start', '--', '--dev'], { stdio: ['ignore', 'inherit', 'inherit'], shell: true, } ); process.on('SIGTERM', toExit); process.on('exit', toExit); }, }; } export default { input: 'src/main.js', output: { sourcemap: true, format: 'iife', name: 'app', file: 'public/build/bundle.js', }, plugins: [ svelte({ preprocess: sveltePreprocess({ sourceMap: !production, postcss: { plugins: [require('tailwindcss'), require('autoprefixer')], }, }), compilerOptions: { // enable run-time checks when not in production dev: !production, }, }), // we'll extract any component CSS out into // a separate file - better for performance css({ output: 'bundle.css' }), // If you have external dependencies installed from // npm, you'll most likely need these plugins. In // some cases you'll need additional configuration - // consult the documentation for details: // https://github.com/rollup/plugins/tree/master/packages/commonjs resolve({ browser: true, dedupe: ['svelte'], }), commonjs(), // In dev mode, call `npm run start` once // the bundle has been generated !production && serve(), // Watch the `public` directory and refresh the // browser on changes when not in production !production && livereload('public'), // If we're building for production (npm run build // instead of npm run dev), minify production && terser(), ], watch: { clearScreen: false, }, };

At first we wanted to just get rid of all the helper utilities. Keep only the kernel, but this would mean a loss of backward compatibility. We needed some efficient code processing instead with recomposition and tree-shaking. We needed a bundler. But which one? Our testing approach relies on targets, not sources. We rebuilt the project frequently, speed was critical requirement. In essence, we chose a solution from a couple of among all available alternatives: esbuild and parcel. Esbuild won. Specifically in our case, it proved to be more productive and customizable.

During my search for deploying Lambdas via GitHub actions, I came across a tutorial that utilized ncc for converting TypeScript and bundling. While ncc is effective, I discovered esbuild, which proved to be significantly faster and perfectly suited to my requirements.

The advent of esbuild, the native support for ES Modules in browsers, the widespread adoption of import map, the emergence of tools like Native Federation, and the Nx ecosystem all combine to forge a flexible and well-maintained Micro Frontend Architecture.

EsBuild is a relatively new, blazing-fast JavaScript bundler and minifier. It stands out for its high performance, significantly speeding up the build process in development pipelines.

Unlike Webpack, the Vite DevServer only compiles files when they are requested. It leverages ES module imports, which allow JS files to import other files without needing to bundle them together during development. When one file changes, only that file needs to be re-compiled, and the rest can remain unchanged. Project files are compiled with Rollup.js. Third-party dependencies in node_modules are pre-compiled using the ultra-fast esbuild bundler for maximum speed, and they are cached until the dependency version changes. Vite also provides a client script for hot module reloading.

Use esbuild to build the React code into a form executable on both the server and client sides.

The functions will bundle using esbuild. For that, it is required to install esbuild globally:

TSX is the newest and most improved version of our ts-node, using ESBuild to transpile TS files to JS very quickly. The most interesting part is that TSX was developed to be a complete replacement for Node, so you can actually use TSX as a TypeScript REPL, if you install it globally with npm i -g tsx, just run tsx in your terminal and you can write TSX natively. But what's even cooler is that you can load TSX for all TypeScript files using --loader tsx when you run your file. For example, let's say we have this file called index.ts:

esbuild plus Vite is out of developer preview and enabled by default, yielding 67%, 87%, 80% speed improvements for build time, hybrid build time and hybrid serve time respectively.