esbuild

237 阅读1分钟

esbuild bundler 项目的主要目标是带来构建工具性能的新时代,并在此过程中创建易于使用的现代捆绑器。

主要特点:

无需缓存的极速 内置javascript css TypeScript 和 jsx 用于CLI, js 和 GO的简单API 捆版ESM和CommonJs模块 Tree shaking,缩小和源地图

安装 esbuild

npm install --save-exact esbuild

安装成功

./node_modules/.bin/esbuild --version

jsx文件 转 js文件, js 编写 jsx语法

tnpm install react react-dom
    import * as React from 'react'
    import * as Server from 'react-dom/server'

    let Greet = () => <h1>Hello, world!</h1>
    console.log(Server.renderToString(<Greet />))

执行 esbuild

esbuild app.jsx --bundle --outfile=out.js

会创建out.js和react库捆版一起的react库 执行node out.js 控制台会看到

hello world

esbuild 使用 js文件使用jsx语法,node script 指令中使用 --loader:.js=jsx

npm 包内 使用 esbuild

  1. add script package.json file
{
  "scripts": {
    "build": "esbuild app.jsx --bundle --outfile=out.js"
  }
}
  1. 指令 esbuild
    npm run build

使用javascript api中编写构建脚本(使用命令行界面可能会变的笨拙)

import * as esbuild from  'esbuild' 

await esbuild.build({
   entryPoints : [ 'app.jsx' ],
   bundle : true ,
   outfile : 'out.js' , 
})

package.json 文件

    scrips: {
        "node-build": "node esbuild.mjs"
    }

目录 --根目录 --app.js --esbuild.mjs --package.json

功能捆版

指定环境版本捆版,如node 10.4

    scripts: {
    
            esbuild app.js --bundle --platform=node --target=node10.4

    }
    

或者 esbuild.mjs文件内使用javasrcript Api

    await esbuild.build({
       entryPoints : [ 'app.jsx' ],
       bundle : true ,
       target: 'node10.4',
       platform: 'node',
       outfile : 'out.js' , 
    })

排除node 内置api

入 import.meta.url fs.readFileSync 和 *node

   await esbuild.build({
      entryPoints : [ 'app.jsx' ],
      bundle : true ,
      target: 'node10.4',
      platform: 'node',
      outfile : 'out.js', 
      packages: 'external'
   })

不同平台的安装使用esbuild包

 本地开发时不能直接将 module包 直接复制到另一个平台上,只复制出除了module下的,将使用npm i,将代码下载下来。