地块服务有效，但地块构建不起作用

发布于 2025-01-12 03:36:56 字数 3282 浏览 4 评论 0原文

我正在使用 Parcel、TypeScript 和 SolidJS 建立一个新项目。除了 TypeScript 之外，我对这个技术堆栈还相当陌生。我已经按照我想要的方式构建了 ts 和 tsx 目标，但是 html 文件让我头疼。

服务命令：

<代码>> npx 包裹 ./static/index.html

正确转换 HTML 和所有链接文件，并将结果转储到 dist 文件夹中，然后启动开发服务器。我检查了生成的文件，输出正是我需要的。

但是，当我尝试仅运行构建命令时：

<代码>> npx 包裹构建 ./static/index.html

它会抛出此错误：

× Build failed.

@parcel/transformer-js: Unexpected token `,`. Expected this, import, async, function, [ for array literal, { for object literal, @ for decorator,   
function, class, null, true, false, number, bigint, string, regexp, ` for template literal, (, or an identifier

  path\to\project\src\renderer\index.tsx:6:21
    3 |
  > 4 | render(() => <App />, document.getElementById('root')!);
  >   |                     ^
    5 |

由于serve命令有效，我知道在配置构建命令时一定有某些东西我错过了，但是我只能弄清楚出了什么问题。

以下是我认为的所有相关文件：

// src/renderer/index.tsx
import { render } from "solid-js/web";
import App from "./App";

render(() => <App />, document.getElementById('root')!);

// src/renderer/App.tsx
import { createEffect, Component } from 'solid-js';

const App: Component = () => {
  createEffect(() => console.log('launched'));

  return (<p>Simple compontent to demonstrate SolidJS is working.</p>);
}

export default App;

// static/index.html
<!DOCTYPE html>
<html>
<head>
  <title>App</title>
</head>
<body>
  <div id="root"></div>
  <script type="module" src="../src/renderer/index.tsx"></script>
</body>
</html>

// package.json
{
  ...
  "main": "dist/main/main.js",
  "static": "dist/index.html",
  "targets": {
    "main": {
      "context": "electron-main",
      "source": "src/main/main.ts",
      "distDir": "dist"
    },
    "static": {
      "context": "browser",
      "source": "static/index.html",
      "distDir": "dist"
    }
  },
  "dependencies": {
    "solid-js": "^1.3.10",
    ...
  },
  "devDependencies": {
    "@parcel/babel-preset-env": "^2.3.2",
    "@parcel/transformer-typescript-tsc": "^2.3.2",
    "parcel": "^2.3.2",
    "typescript": ">=3.0.0",
    ...
   }
}

// .babelrc
{
  "plugins": [
    ["babel-plugin-jsx-dom-expressions", { "moduleName": "solid-js/web" }],
    "@babel/plugin-transform-runtime"
  ]
}

// .parcelrc
{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.{ts,tsx}": [
      "@parcel/transformer-typescript-tsc",
      "@parcel/transformer-babel"
    ]
  }
}

// .tsconfig.json
{
  "compilerOptions": {
    "outDir": "./dist",
    "rootDir": ".",
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
    "target": "esnext",
    "module": "esnext",
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.d.ts"
  ]
}

原文

I'm setting up a new project with Parcel, TypeScript, and SolidJS. With the exception of TypeScript, I'm fairly new to this tech stack. I've gotten the ts and tsx targets building exactly the way I want, but the html file is giving me a headache.

The serve command:

> npx parcel ./static/index.html

Correctly transforms the HTML and all linked files and dumps the result into the dist folder, then starts a development server. I've inspected the resulting files, and the output is precisely what I need.

However, when I try to run just the build command:

> npx parcel build ./static/index.html

It spits out this error:

× Build failed.

@parcel/transformer-js: Unexpected token `,`. Expected this, import, async, function, [ for array literal, { for object literal, @ for decorator,   
function, class, null, true, false, number, bigint, string, regexp, ` for template literal, (, or an identifier

  path\to\project\src\renderer\index.tsx:6:21
    3 |
  > 4 | render(() => <App />, document.getElementById('root')!);
  >   |                     ^
    5 |

Since the serve command works, I know there must be something I've missed in configuring the build command, but I just can figure out what's wrong.

Here are what I think are all the relevant files:

// src/renderer/index.tsx
import { render } from "solid-js/web";
import App from "./App";

render(() => <App />, document.getElementById('root')!);

// src/renderer/App.tsx
import { createEffect, Component } from 'solid-js';

const App: Component = () => {
  createEffect(() => console.log('launched'));

  return (<p>Simple compontent to demonstrate SolidJS is working.</p>);
}

export default App;

// static/index.html
<!DOCTYPE html>
<html>
<head>
  <title>App</title>
</head>
<body>
  <div id="root"></div>
  <script type="module" src="../src/renderer/index.tsx"></script>
</body>
</html>

// package.json
{
  ...
  "main": "dist/main/main.js",
  "static": "dist/index.html",
  "targets": {
    "main": {
      "context": "electron-main",
      "source": "src/main/main.ts",
      "distDir": "dist"
    },
    "static": {
      "context": "browser",
      "source": "static/index.html",
      "distDir": "dist"
    }
  },
  "dependencies": {
    "solid-js": "^1.3.10",
    ...
  },
  "devDependencies": {
    "@parcel/babel-preset-env": "^2.3.2",
    "@parcel/transformer-typescript-tsc": "^2.3.2",
    "parcel": "^2.3.2",
    "typescript": ">=3.0.0",
    ...
   }
}

// .babelrc
{
  "plugins": [
    ["babel-plugin-jsx-dom-expressions", { "moduleName": "solid-js/web" }],
    "@babel/plugin-transform-runtime"
  ]
}

// .parcelrc
{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.{ts,tsx}": [
      "@parcel/transformer-typescript-tsc",
      "@parcel/transformer-babel"
    ]
  }
}

// .tsconfig.json
{
  "compilerOptions": {
    "outDir": "./dist",
    "rootDir": ".",
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
    "target": "esnext",
    "module": "esnext",
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.d.ts"
  ]
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

篱下浅笙歌 2025-01-19 03:36:56

您的 babel 配置过多，因为您不需要转换运行时。只需安装 babel-preset-solid 和 @babel/core 即可完成。

Parcel 支持项目范围的配置文件（例如 babel.config.json）以及文件相关配置（例如 .babelrc）。
注意：应避免使用 JavaScript Babel 配置（例如 babel.config.js）。这些会导致 Parcel 的缓存效率降低，这意味着每次重新启动 Parcel 时，所有 JS 文件都将被重新编译。 https://parceljs.org/languages/javascript/#babel

创建 .babelrc 文件包含以下内容：

{
  "presets": ["solid"]
}

您可以查看此答案以了解其他详细信息：https://stackoverflow.com/a/75641238/7134134

Your babel configuration is excessive since you don't need transform runtime. Just install babel-preset-solid and @babel/core and you are done.

Parcel supports both project wide config files such as babel.config.json, as well as file relative configs such as .babelrc.
Note: JavaScript Babel configs (e.g. babel.config.js) should be avoided. These cause Parcel’s caching to be less effective, which means all of your JS files will be recompiled each time you restart Parcel. https://parceljs.org/languages/javascript/#babel

Create a .babelrc file with the following content: