使用 Vite 作为另一个构建的副作用生成独立的 js 工件

Question

I'm using Vite (vite@3.1.8) to build Typescript artifacts for an SPA "site" using SolidJS (solid-js@1.6.0).

here's my vite.config.ts

import { defineConfig, resolveBaseUrl } from 'vite'
import solidPlugin from 'vite-plugin-solid'

export default defineConfig({
  plugins: [solidPlugin()],
  server: {
    port: 3000,
  },
  build: {
    target: 'esnext',
    outDir: '../htdocs',
    rollupOptions: {
      input: {
        index: "./index.html",
        dev: "./dev.html",
        test: "./test.ts",
      },
      output: {
        entryFileNames: `assets/[name].js`,
        chunkFileNames: `assets/[name].js`,
        assetFileNames: `assets/[name].[ext]`
      }
    },
  },
});

Currently, it actually builds 2 html files (index.html and dev.html) and the artifacts needed to run those files. Its great. Couldn't be happier.

I would like to have the transpiler to also kick out test.js so that I can run it to do some sanity checking before deploying to production.

I'm hoping to do vite build , and then run node../htdocs/assets/test.js (or something similar), and have it block the final deployment if any my sanity tests fail.

however, when I attempt to do this, I get an error when I run test.js, complaining about my use of import statements.

Warning: To load an ES module, set "type": "module" in the package.json or use the.mjs extension.

setting my package type to module in package.json doesn't fix it. changing the test file to test.mjs doesnt fix it. I'm not really sure what to try next.

What I really wish it would do is do the whole "import" as part of transpiling, and make one self-contained test.js that just runs. It seems like that is what it does when it builds index.html and dev.html, why wont it do that for my ts file?

Answer 1

That should work. I just tried making a new repo with your vite.config.ts , one-line index.html , dev.html , and test.ts files, and vite , vite-plugin-solid , solid-js installed. In the end I got a ../htdocs/assets/test.js file.

You might also be interested in checking out Vitest which makes testing like this easier to do, and won't accidentally end up in your deployed htdocs.

Answer 2

The best solution I could find was to make a separate config file for building the tests.

 import { defineConfig } from 'vite' import solidPlugin from 'vite-plugin-solid' export default defineConfig({ plugins: [solidPlugin()], server: { port: 3000, }, build: { target: 'esnext', outDir: '../htdocs', lib: { entry: "./test-runner.ts", name: "test-runner", fileName: "test-runner" }, rollupOptions: { }, }, });

and then, update my package.json to make my test script compile and run the output from that alternative vite config.

 "scripts": { "start": "vite", "dev": "vite", "build": "vite build", "serve": "vite preview", "test": "vite build --config vite.config-tests.ts && node../htdocs/test-runner.umd.js" },