Add an option to transpile .js file with esbuild

In React development case it is a common habit to use .js file instead of .jsx for JSX component.

Vite seems simply skips the esbuild plugin if the file name does not match this Regex:

https://github.com/vitejs/vite/blob/e24133e51cb9d2fc4a338a6efd44a455978e5020/src/node/esbuildService.ts#L9

https://github.com/vitejs/vite/blob/e24133e51cb9d2fc4a338a6efd44a455978e5020/src/node/server/serverPluginEsbuild.ts#L22-L29

which means only .ts, .tsx and .jsx files would have the opportunity to be transpiled by esbuild.

How about adding an option to also transpile .js file with esbuild? It would be great for React developers.

[haflinger]

Hi, the include option doesn’t seem to work anymore. ( vite => ^2.0.0-beta.64 )

  vite:config bundled config file loaded in 78ms +0ms
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'alias',
  vite:config     'vite:dynamic-import-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'react-refresh',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'vite:define',
  vite:config     'rollup-plugin-dynamic-import-variables',
  vite:config     'vite:import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:terser',
  vite:config     'vite:reporter'
  vite:config   ],
  vite:config   esbuild: { include: 'js' },
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge16', 'firefox60', 'chrome61', 'safari11' ],
  vite:config     polyfillDynamicImport: true,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     minify: 'terser',
  vite:config     terserOptions: {},
  vite:config     cleanCssOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     brotliSize: true,
  vite:config     chunkSizeWarningLimit: 500
  vite:config   },
  vite:config   configFile: '/project/packages/front/vite.config.js',
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     build: {}
  vite:config   },
  vite:config   root: '/project/packages/front',
  vite:config   base: '/',
  vite:config   publicDir: '/project/packages/front/public',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   isProduction: true,
  vite:config   optimizeCacheDir: '/project/packages/front/node_modules/.vite',
  vite:config   alias: [ { find: /^\/@vite\//, replacement: [Function: replacement] } ],
  vite:config   server: {},
  vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen]
  vite:config   },
  vite:config   createResolver: [Function: createResolver]
  vite:config } +5ms
[rollup-plugin-dynamic-import-variables] Unexpected token (10:2)
file: /project/packages/front/src/index.js:10:2
error during build:
SyntaxError: Unexpected token (10:2)
    at Object.pp$4.raise (/project/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:15778:13)
    at Object.pp.unexpected (/project/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:13470:8)
    at Object.pp$3.parseExprAtom (/project/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:15177:10)
    at Object.pp$3.parseExprSubscripts (/project/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:14980:19)
    at Object.pp$3.parseMaybeUnary (/project/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:14957:17)
    at Object.parseMaybeUnary (/project/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:19372:29)
    at Object.pp$3.parseExprOps (/project/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:14892:19)
    at Object.pp$3.parseMaybeConditional (/project/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:14875:19)
    at Object.pp$3.parseMaybeAssign (/project/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:14843:19)
    at Object.pp$3.parseExprList (/project/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:15681:18)

index.js

[yyx990803]

@mijamo

I cannot simply rename hundreds of files in my project to adopt a new bundler.

Then don’t.