我正在使用 Parcel、TypeScript 和 SolidJS 建立一个新项目。除了 TypeScript，我对这个技术堆栈还很陌生。我已经按照我想要的方式构建了
tstsxhtml服务命令：
> npx parcel ./static/index.html
正确转换 HTML 和所有链接文件并将结果转储到
dist但是，当我尝试只运行构建命令时：
> npx parcel build ./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 命令有效，我知道一定有 something 我在配置 build 命令时遗漏了，但我只能找出问题所在。
以下是我认为的所有相关文件：
// 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"
]
}
您的 babel 配置过多，因为您不需要转换运行时。只需安装
babel-preset-solid@babel/coreParcel 支持项目范围的配置文件，例如 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