6. esbuild 的使用教程

• 安装 esbuild

  yarn add esbuild

• 创建 index.js 文件 ```javascript import React from “react”; React.createElement(“div”); function hello() { console.log(“hello esbuild”); }

hello();

- 编译文件,
```javascript
npx esbuild index.js --outfile=dist.js

输出代码与文件无异

import React from "react";
React.createElement("div");
function hello() {
  console.log("hello esbuild");
}
hello();

• 把第三方库打包到代码里

  npx esbuild index.js --outfile=dist.js --bundle

  • —outfile 输出文件
  • —outdir 输出目录
  • —bundle 打包（会删除无用代码）
  • —target 指定编译目标 --target=esnext
  • —platform 指定编译目标 --platform=node
  • —format 指定编译格式 --format=cjs
  • —watch 监听文件改变
  • —define 指定环境变量 --define:TEST=12
  • —loader 指定解析器(需要开启bundle) --loader:.png=dataurl
  • 
    
• esbuild 中无法识别 js 中的 dom，需要使用 jsx
  • 默认编译成 React.createElement 的代码
  • --jsx-factory=myJsxFactory 指明其他编译方法

    // import React from "react";
    import pkg from "./package.json";
    import logo from "./logo.png";
    import "./index.css";
    // const div = React.createElement("div");
    function hello() {
    console.log("hello esbuild");
    }
    console.log(TEST, logo, pkg);
    hello();
    const div = <div>Hello</div>;
    console.log(div);
    export default hello;