f2e-server middleware for esbuild
npm i --save-dev f2e-server f2e-middle-esbuildcp ./node_modules/f2e-middle-esbuild/.esbuildrc.js ./
.f2econfig.js 中添加:
module.exports = {
...
middleware: [
...
{
middleware: 'esbuild',
// 针对哪些文件监听修改
watches: [/\.[jet]?sx?$/],
}
]
}更多参数请参考: src/index.ts
.esbuildrc.js 参考 esbuild.ts and esbuild.md
/**
* @type { import('f2e-middle-esbuild').BuildOptions[] }
*/
let config = [
{
sourcemap: true,
/**
* 启动时生成 .esbuild/external.ts
*/
external: [
'react',
'react-dom',
],
/**
* 设置为true时， 不生成 .esbuild/external.ts
* @description 自定义参数
*/
ignore_external: false,
entryPoints: {
index: 'src/index.tsx'
},
target: 'chrome70',
jsxFactory: 'React.createElement',
bundle: true,
format: 'iife',
loader: {
'.tsx': 'tsx',
'.ts': 'ts'
},
tsconfig: './tsconfig.json',
},
];
module.exports = configindex.html
<html>
<body>
<script src=".esbuild/external.ts"></script>
<script src="src/index.tsx"></script>
</body>
</html>