我正在使用 ESBuild 编译 JS 以在浏览器中使用。当我尝试导入 CSS 时，我收到 [错误] 意外的“。”我该如何解决这个问题？

Question

我正在构建一个在浏览器中运行的 JS 笔记本。我正在使用 ESBuild 进行编译。我正在尝试让它处理 CSS 导入，例如 。不管怎样，我收到以下错误：

✘ [错误] 意外的“.”

a:https://unpkg.com/bulma/css/bulma.css:3:0:
  3 │ .button, .input, .textarea, .select select, .file-cta,
    ╵ ^

我已经编写了用于处理 onLoad() 的插件来处理 CSS，但似乎我的程序在出错之前还没有完成那么远。

这是插件：

import axios from 'axios';
import * as esbuild from 'esbuild-wasm';
import localforage from 'localforage';

const fileCache = localforage.createInstance({
  name: 'fileCache',
});

export const outputCodeFetcher = (inputCode: string) => {
  return {
    name: 'output-code-fetch',
    setup(build: esbuild.PluginBuild) {
      build.onLoad({ filter: /.*/ }, async (args: esbuild.OnLoadArgs) => {
        if (args.path === 'index.js') {
          return {
            loader: 'jsx',
            contents: inputCode,
          };
        }

        const cachedResult = await fileCache.getItem(args.path);

        if (cachedResult) {
          return cachedResult;
        }

        const { data, request } = await axios.get(args.path);

        console.log(request);

        const fileType = args.path.match(/.css$/) ? 'css' : 'jsx';

        const escapedData = (data: string) => {
          return data
            .replace(/\n/g, '')
            .replace(/"/g, '\\"')
            .replace(/'/g, "\\'");
        };

        const contents =
          fileType === 'css'
            ? `
          const style = document.createElement('style');
          style.innerText = '${escapedData(data)}';
          document.head.appendChild(style);
        `
            : data;
        const axiosResult = {
          loader: 'jsx',
          contents: contents,
          resolveDir: new URL('./', request.responseURL).pathname,
        };

        await fileCache.setItem(args.path, axiosResult);
        return axiosResult;
      });
    },
  };
};

这是运行 ESBuild 实例的应用程序：

import { useState } from 'react';
import {
  inputCodePathResolver,
  outputCodeFetcher,
  startEsbuildService,
} from './plugins';

const App = () => {
  const [input, setInput] = useState('');
  const [code, setCode] = useState('');

  const onClick = async () => {
    const esBuildRef = await startEsbuildService();
    // const result = await esBuildRef.transform(input, {
    //   loader: 'jsx',
    //   target: 'es2015',
    // });
    const result = await esBuildRef.build({
      entryPoints: ['index.js'],
      sourcemap: 'external',
      bundle: true,
      write: false,
      plugins: [inputCodePathResolver(), outputCodeFetcher(input)],
      define: {
        // 'process.env.NODE_ENV': '"production"',
        global: 'window',
      },
      outdir: 'out',
    });
    console.log(result);

    setCode(result.outputFiles[1].text);
  };

  return (
    <>
      <div>
        <textarea
          value={input}
          onChange={(event) => setInput(event.target.value)}
        ></textarea>
        <div>
          <button onClick={onClick}>Submit</button>
        </div>
        <pre>{code}</pre>
      </div>
    </>
  );
};

export default App;

感谢您的任何见解。

我尝试格式化 CSS 文件以处理 JS 片段中的 CSS，但我不相信该程序能够做到这一点。我尝试在应用程序中重新格式化 ESBuild 实例，但也没有得到任何结果。我还尝试让 esbuild-sass-plugin 与 esbuild-wasm 一起使用，但也没有运气。我已经搜索了有关 SO 的所有相关问题，但找不到具有可行解决方案的特定问题的案例。

Answer 1

我无法重现该问题。

我已经克隆了你的存储库，然后启动了开发服务器：

npm run dev

。

如你所见，我没有错误。在这种情况下，我怀疑您的缓存存在问题。

1. 删除您的

   node_modules

   ，然后使用

   npm ci

   重新安装依赖项。
2. 删除您的构建目录：

   dist

   ，

   .vite

   。使用

   npm run dev

   重新启动服务器。
3. 看看还有什么地方可以缓存