Vue3源码学习之路-实现构建流程

最新推荐文章于 2024-05-01 14:30:23 发布

凉秋秋秋

最新推荐文章于 2024-05-01 14:30:23 发布

阅读量158

点赞数

分类专栏： Vue3源码学习记录文章标签：学习 vue.js

本文链接：https://blog.csdn.net/weixin_44659356/article/details/126678799

版权

Vue3源码学习记录专栏收录该内容

11 篇文章 0 订阅

订阅专栏

构建脚本文件

创建文件scripts/dev.js
创建scripts命令

package.json

 "scripts": {
    "dev": "node scripts/dev.js reactivity -f global"
  }

使用node执行scripts/dev.js脚本打包reactivity模块为global格式

dev.js编写

// 获取命令行携带的参数 node scripts/dev.js reactivity -f global
// minimist解析命令
const args = require('minimist')(process.argv.slice(2));
// 使用esbuild打包
const { build } = require('esbuild');
const { resolve } = require('path');

// 打包目标
const target = args._[0] || 'reactivity';
// 打包格式
const format = args.f || 'global';

// 解析package.json
const pkg = require(resolve(__dirname, `../packages/${target}/package.json`));

// 输出格式
// iife 立即执行函数: (function(){})()
// cjs node中的模块: module.exports
// esm 浏览器中的esModule模块: import
const outputFormat = format.startsWith('global')
  ? 'iife'
  : format === 'cjs'
  ? 'cjs'
  : 'esm';

// 输出目录
const outfile = resolve(__dirname, `../packages/${target}/dist/${target}.${format}.js`);

// 默认支持ts，不会校验ts写的对不对
build({
  // 打包入口
  entryPoints: [resolve(__dirname, `../packages/${target}/src/index.ts`)],
  // 输出文件
  outfile,
  // 所有包全部打包到一起
  bundle: true,
  // 需要sourcemap
  sourcemap: true,
  // 输出格式
  format: outputFormat,
  // 全局名字
  globalName: pkg.buildOptions?.name,
  // 平台
  platform: format === 'cjs' ? 'node' : 'browser',
  // 监控文件变化
  watch: {
    onRebuild(error) {
      if (!error) console.log('rebuild...');
    },
  },
}).then(() => {
  console.log('watching...');
});