跳到主要内容

准备

2023年07月21日
柏拉文
越努力，越幸运

一、初始化​

pnpm init

二、构建目录​

2.1 packages/vue​

2.2 packages/shared​

2.3 packages/reactivity​

2.4 packages/runtime-dom​

2.5 packages/runtime-core​

2.6 packages/compiler-dom​

2.7 packages/compiler-core​

三、配置编译​

import RollupPluginCommonjs from '@rollup/plugin-commonjs';
import RollupPluginResolve from '@rollup/plugin-node-resolve';
import RollupPluginTypescript from '@rollup/plugin-typescript';

export default [
  {
    input: 'packages/vue/src/index.ts',
    output: [
      {
        name: 'Vue',
        format: 'es',
        sourcemap: true,
        file: './packages/vue/dist/vue.js'
      },
      {
        name: 'Vue',
        format: 'amd',
        sourcemap: true,
        file: './packages/vue/dist/vue.amd.js'
      },
      {
        name: 'Vue',
        format: 'cjs',
        sourcemap: true,
        file: './packages/vue/dist/vue.cjs.js'
      },
      {
        name: 'Vue',
        format: 'iife',
        sourcemap: true,
        file: './packages/vue/dist/vue.iife.js'
      }
    ],
    plugins: [
      RollupPluginResolve(),
      RollupPluginCommonjs(),
      RollupPluginTypescript({
        sourceMap: true
      })
    ]
  }
];

四、配置校验​

{
  "compilerOptions": {
    "strict": true,         
    "baseUrl": ".",
    "target": "es5",
    "allowJs": false,
    "outDir": "temp",
    "sourceMap": false,
    "module": "esnext",  
    "skipLibCheck": true,
    "noImplicitAny":false,
    "esModuleInterop": true,
    "noUnusedLocals": false,
    "removeComments": false,
    "resolveJsonModule": true,
    "noUnusedParameters": false,
    "downlevelIteration": true,
    "moduleResolution": "node",
    "lib": ["esnext","dom"],
    "paths": {
      "vue": ["packages/vue/src"],
      "@vue/*": ["packages/*/src"],
    },
    "forceConsistentCasingInFileNames": true,          
  },
  "include": [
    "packages/*/src"
  ]
}

五、项目管理​

{
  "type": "module",
  "name": "vue-mini",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "push": "git add . && git commit -m 推送 && git push origin master",
    "pull": "git fetch --all && git reset --hard origin/master && git pull origin master"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@rollup/plugin-commonjs": "^25.0.3",
    "@rollup/plugin-node-resolve": "^15.1.0",
    "@rollup/plugin-typescript": "^11.1.2",
    "rollup": "^3.26.3",
    "tslib": "^2.6.0",
    "typescript": "^5.1.6"
  }
}

六、其他配置​

6.1 .gitignore​

# Dependencies
/node_modules

# Generated files
.docusaurus
.cache-loader

# Misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

6.2 .prettierrc​

{
    "semi": true,
    "singleQuote": true,
    "printWidth": 80,
    "trailingComma": "none",
    "arrowParens": "avoid"
}

6.3 .prettierignore​

dist

七、运行调试​

7.1 render​

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue3 h</title>
    <script type="importmap">
      {
        "imports": {
          "vue": "../../dist/vue.runtime.esm-bundler.js"
        }
      }
    </script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module">
      import { h, render } from 'vue'

      const div1 = h('div', { class: 'test' }, 'hello render')

      render(div1, document.querySelector('#app'))
    </script>
  </body>
</html>

7.2 compile​

7.3 createApp​

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="importmap">
      {
        "imports": {
          "vue": "../../dist/vue.runtime.esm-bundler.js"
        }
      }
    </script>
  </head>
  <body>
    <div id="app"></div>

    <script type="module">
      import { ref, onMounted, createApp } from 'vue'

      const App = {
        template: `<div> {{ count }}</div>`,
        setup() {
          const count = ref(0)

          onMounted(() => {
            setTimeout(() => {
              count.value += 1
            }, 3000)

            console.log(count)
          })

          return {
            count
          }
        }
      }

      const app = createApp(App)
      app.mount('#app')
    </script>
  </body>
</html>