step1 npm init 初始化项目

npm init

step2 安装ts

npm install -g typescript tslib

运行

// 生成默认配置
tsc -init

step3 安装rollup

npm install @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-typescript -D

配置 rollup.config.js

import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import typescript from '@rollup/plugin-typescript'

/**
 * 默认导出一个数组，数组的每一个对象都是一个单独的导出文件配置，详细可查：https://www.rollupjs.com/guide/big-list-of-options
 */
export default [
    {
        // 入口文件
        input: 'packages/vue/src/index.ts',
        // 打包出口
        output: [
            // 导出 iife 模式的包
            {
                // 开启 SourceMap
                sourcemap: true,
                // 导出的文件地址
                file: './dist/vue.js',
                // 生成的包格式：一个自动执行的功能，适合作为<script>标签
                format: 'iife',
                // 变量名
                name: 'Vue'
            }
        ],
        // 插件
        plugins: [
            // ts 支持
            typescript({
                sourceMap: true
            }),
            // 模块导入的路径补全
            resolve(),
            // 将 CommonJS 模块转换为 ES2015
            commonjs()
        ]
    }
]

stpe4 配置prettier

.prettierrc.js

module.exports = {
    // 结尾无分号
    semi: true,
    // 全部使用单引号
    singleQuote: true,
    // 每行长度为 80
    printWidth: 80,
    // 不添加尾随 ， 号
    trailingComma: 'none',
    // 省略箭头函数括号
    arrowParens: 'avoid'
};

step5 配置packages/vue/src/index.ts

console.log("hello world");

配置成功啦 🎉

代码地址 github.com/beewolf233/…

参考文章

vue3 源码学习，实现一个 mini-vue（一）：搭建框架雏形