f2e-middle-esbuild

f2e-server middleware for esbuild

Usage no npm install needed!

<script type="module">
  import f2eMiddleEsbuild from 'https://cdn.skypack.dev/f2e-middle-esbuild';
</script>

README

f2e-middle-esbuild

f2e-server middleware for esbuild

install

  • npm i f2e-middle-esbuild
  • cp ./node_modules/f2e-middle-esbuild/.esbuildrc.js

config

.f2econfig.js 中添加:

module.exports = {
    ...
    middleware: [
        ...
        { middleware: 'esbuild' }
    ]
}

options

.esbuildrc.js 参考 esbuild.ts and esbuild.md

// @ts-check

/**
 * @type { import('f2e-middle-esbuild').BuildOptions }
 */
let config = {
    // 针对哪些文件监听修改
    watches: [/\.[jet]?sx?$/],
    sourcemap: 'external',
    external: [
        'serve/interface.ts',
        'react',
        'react-dom',
    ],
    entryPoints: ['src/index.tsx'],
    outfile: 'static/bundle.js',
    target: 'esnext',
    jsxFactory: 'React.createElement',
    bundle: true,
    format: 'iife',
    loader: {
        '.tsx': 'tsx',
        '.ts': 'ts'
    },
    tsconfig: './tsconfig.json',
};

module.exports = config

external 相关

一般需要前置引入第三方库 例如: src/libs.js

$include["dev模式引入资源"]["build模式引入资源"] 是 f2e-server 内置工具

require = function (key) {
    return ({
        'react': React,
        'react-dom': ReactDOM,
    })[key]
};
$include['../node_modules/react/umd/react.development.js']['../node_modules/react/umd/react.production.min.js'];
$include['../node_modules/react-dom/umd/react-dom.development.js']['../node_modules/react-dom/umd/react-dom.production.min.js'];

index.html

<html>
    <body>
        <script src="/src/lib.js?v1.0.0"></script>
        <script src="/static/bundle.js?v1.0.0"></script>
    </body>
</html>