preact-render-to-string を試してみたいです。
https://stackoverflow.com/questions/69023821/how-to-set-up-the-preact-render-to-string-on-the-express
でドキュメントにあるexpressでの方法をきいたのですが、expressでBabelが動く方法を試せばよいというコメントが付いて、まさしくそのとおりだとは思うのですが、
Node.js + Express で ES6を使う - Qiita
を参考に下記のようにしてみましたが、やはりエラーです。
package.json
{
"name": "y",
"version": "1.0.0",
"type": "module",
"description": "",
"main": "index.js",
"scripts": {
"start": "babel-node app.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.1"
},
"devDependencies": {
"@babel/core": "^7.15.0",
"@babel/node": "^7.14.9",
"@babel/preset-env": "^7.15.0",
"preact": "^10.5.14",
"preact-render-to-string": "^5.1.19"
}
}
.babelrc
{
"presets": [
"@babel/preset-env"
]
}
実行
npm run start
> y@1.0.0 start
> babel-node app.js
file:///src/pr/ex/app.js:8
<div class="fox">
^
SyntaxError: Unexpected token '<'
at Loader.moduleStrategy (node:internal/modules/esm/translators:146:18)
at async link (node:internal/modules/esm/module_job:67:21)
そもそも上記の質問はexpressで動かす方法を聞いたのですが、これは私の英語力でこの聞き方のほうが、実際に動かす方法を聞けるのではないかと思ったためです。
とはいえ、Node.js界ではあたりまえすぎるのか、はたまたこのライブラリのユーザー数が少ないのかあまり回答がつかない気配がします(そもそも質問して1日もたってませんが)。
本質問ではとにかくなんでもよいので楽な方法で試す方法はないかと思って質問しました。
というのも、ドキュメントにはCodePenでいとも簡単に実行させているリンクがあるからです。
Cute Fox-Related Demo (@ CodePen)
ちょっとCodePenに詳しくなくなぜ動いているのかわかりませんが、私はCodePenを使わず下記のようなCDNのBabelを使ったHTMLをローカルに置いて、ブラウザで見てみましたが、当然のように真っ白な空間がブラウザに表示されて何も起こりません(CDNのBabelがpreactRenderToStringを知っているわけないでしょうから、他になにかを読み込ませないといけないはずです)。(script内のコードはドキュメントのCodepenからの引用です)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const renderToString = preactRenderToString.default;
const { h, Component, render } = preact;
/** @jsx h */
// Classical components work
class Fox extends Component {
render({ name }) {
return <span class="fox">{name}</span>;
}
}
// ... and so do pure functional components:
const Box = ({ type, children }) => (
<div class={'box box-' + type}>{children}</div>
);
// render the components & JSX down to an HTML string:
let html = renderToString(
<Box type="open">
<Fox name="Finn" />
</Box>
);
document.body.innerHTML = html;
render(
<Box type="open">
<Fox name="Finn" />
</Box>,
document.body
)
</script>
</body>
</html>
Expressでの動作のさせかたは、もしかしたら本家の方で回答があるかもしれませんので、
本質問では、とにかく簡単に試せる方法、とくにCodePenで動いているので、カジュアルにブラウザで試せる方法があるのかどうか知りたいと考えいます。Nodeやpackage.json等の慣習に慣れていれば、どうすればうごくようになるか勘が効くものなのでしょうか?