- 建议直接看官方仓库 前端打包工具-Father
一、创建一个项目
npx create-father my-father-project
填写基本信息:
二、新建.fatherrc.ts 打包配置文件
import { defineConfig } from 'father'
export default defineConfig({
// 浏览器使用,ESModule模块
esm: {
input: 'src/client', // 编译目录, 默认src
platform: 'browser', // 默认构建为 Browser 环境的产物
transformer: 'babel', // 默认使用 babel 以提供更好的兼容性
},
// Node环境使用,CommonJS模块
cjs: {
input: 'src/server',
platform: 'node', // 默认构建为 Node.js 环境的产物
transformer: 'esbuild', // 默认使用 esbuild 以获得更快的构建速度
},
// 以下为 umd 配置项启用时的默认值,有自定义需求时才需配置
umd: {
entry: 'src/umd', // 默认构建入口文件
name: 'BYSKING_UMD',
},
// prebundle: {
// deps: ['pkg-a', 'pkg-b'], // 需要预打包的依赖包名,需要安装在 `devDependencies` 中
// output: 'compiled', // 默认输出目录,有自定义需求时才需配置
// },
})
三、 package.josn 执行 yarn build 打包
"scripts": {
"build": "father build",
"build:deps": "father prebundle",
"dev": "father dev",
"doctor": "father doctor",
"prepublishOnly": "father doctor && npm run build"
},