EsModule

2023年07月21日

柏拉文

越努力，越幸运

一、认识

二、编译配置

三、命令管理

3.1 配置编译产物

package.json 新增命令行 "dev-esm": "node scripts/dev.js -if esm-bundler-runtime"

"scripts": {
    "dev": "node scripts/dev.js -s true",
    "build": "node scripts/build.js -s true",
    "build-dts": "tsc -p tsconfig.build.json && rollup -c rollup.dts.config.js",
    "size": "run-s size-global size-baseline",
    "size-global": "node scripts/build.js vue runtime-dom -f global -p",
    "size-baseline": "node scripts/build.js vue -f esm-bundler-runtime && node scripts/build.js runtime-dom runtime-core reactivity shared -f esm-bundler && cd packages/size-check && vite build && node brotli",
    "check": "tsc --incremental --noEmit",
    "lint": "eslint --cache --ext .ts packages/*/{src,__tests__}/**.ts",
    "format": "prettier --write --cache --parser typescript \"**/*.[tj]s?(x)\"",
    "format-check": "prettier --check --cache --parser typescript \"**/*.[tj]s?(x)\"",
    "test": "vitest",
    "test-unit": "vitest -c vitest.unit.config.ts",
    "test-e2e": "node scripts/build.js vue -f global -d && vitest -c vitest.e2e.config.ts",
    "test-dts": "run-s build-dts test-dts-only",
    "test-dts-only": "tsc -p ./packages/dts-test/tsconfig.test.json",
    "test-coverage": "vitest -c vitest.unit.config.ts --coverage",
    "release": "node scripts/release.js",
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
     "dev-esm": "node scripts/dev.js -if esm-bundler-runtime",
    "dev-compiler": "run-p \"dev template-explorer\" serve",
    "dev-sfc": "run-s dev-sfc-prepare dev-sfc-run",
    "dev-sfc-prepare": "node scripts/pre-dev-sfc.js || npm run build-compiler-cjs",
    "dev-sfc-serve": "vite packages/sfc-playground --host",
    "dev-sfc-run": "run-p \"dev compiler-sfc -f esm-browser\" \"dev vue -if esm-bundler-runtime\" \"dev server-renderer -if esm-bundler\" dev-sfc-serve",
    "serve": "serve",
    "open": "open http://localhost:5000/packages/template-explorer/local.html",
    "build-sfc-playground": "run-s build-compiler-cjs build-runtime-esm build-ssr-esm build-sfc-playground-self",
    "build-compiler-cjs": "node scripts/build.js compiler reactivity-transform shared -af cjs",
    "build-runtime-esm": "node scripts/build.js runtime reactivity shared -af esm-bundler && node scripts/build.js vue -f esm-bundler-runtime && node scripts/build.js vue -f esm-browser-runtime",
    "build-ssr-esm": "node scripts/build.js compiler-sfc server-renderer -f esm-browser",
    "build-sfc-playground-self": "cd packages/sfc-playground && npm run build",
    "preinstall": "node ./scripts/preinstall.js",
    "postinstall": "simple-git-hooks"
}

3.2 开启 SourceMap

编译命令行后面添加 -s true 即可开启 SourceMap

"scripts": {
    "dev": "node scripts/dev.js -s true",
    "build": "node scripts/build.js -s true",
    "build-dts": "tsc -p tsconfig.build.json && rollup -c rollup.dts.config.js",
    "size": "run-s size-global size-baseline",
    "size-global": "node scripts/build.js vue runtime-dom -f global -p",
    "size-baseline": "node scripts/build.js vue -f esm-bundler-runtime && node scripts/build.js runtime-dom runtime-core reactivity shared -f esm-bundler && cd packages/size-check && vite build && node brotli",
    "check": "tsc --incremental --noEmit",
    "lint": "eslint --cache --ext .ts packages/*/{src,__tests__}/**.ts",
    "format": "prettier --write --cache --parser typescript \"**/*.[tj]s?(x)\"",
    "format-check": "prettier --check --cache --parser typescript \"**/*.[tj]s?(x)\"",
    "test": "vitest",
    "test-unit": "vitest -c vitest.unit.config.ts",
    "test-e2e": "node scripts/build.js vue -f global -d && vitest -c vitest.e2e.config.ts",
    "test-dts": "run-s build-dts test-dts-only",
    "test-dts-only": "tsc -p ./packages/dts-test/tsconfig.test.json",
    "test-coverage": "vitest -c vitest.unit.config.ts --coverage",
    "release": "node scripts/release.js",
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
     "dev-esm": "node scripts/dev.js -if esm-bundler-runtime -s true",
    "dev-compiler": "run-p \"dev template-explorer\" serve",
    "dev-sfc": "run-s dev-sfc-prepare dev-sfc-run",
    "dev-sfc-prepare": "node scripts/pre-dev-sfc.js || npm run build-compiler-cjs",
    "dev-sfc-serve": "vite packages/sfc-playground --host",
    "dev-sfc-run": "run-p \"dev compiler-sfc -f esm-browser\" \"dev vue -if esm-bundler-runtime\" \"dev server-renderer -if esm-bundler\" dev-sfc-serve",
    "serve": "serve",
    "open": "open http://localhost:5000/packages/template-explorer/local.html",
    "build-sfc-playground": "run-s build-compiler-cjs build-runtime-esm build-ssr-esm build-sfc-playground-self",
    "build-compiler-cjs": "node scripts/build.js compiler reactivity-transform shared -af cjs",
    "build-runtime-esm": "node scripts/build.js runtime reactivity shared -af esm-bundler && node scripts/build.js vue -f esm-bundler-runtime && node scripts/build.js vue -f esm-browser-runtime",
    "build-ssr-esm": "node scripts/build.js compiler-sfc server-renderer -f esm-browser",
    "build-sfc-playground-self": "cd packages/sfc-playground && npm run build",
    "preinstall": "node ./scripts/preinstall.js",
    "postinstall": "simple-git-hooks"
}

3.3 运行命令，编译产物

执行 pnpm dev-esm 生成 Vue 产物。产物路径为: packages/vue/dist/vue.runtime.esm-bundler.js

四、运行调试

4.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</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>

4.2 compile

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

      const renderFn = compile(`<input v-model='a' />`);
      console.log(renderFn)
    </script>
  </body>
</html>

4.3 createApp

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

      const App = {
        template: `<input v-model="a" />`,
        setup(){
            const a = ref(0);

            return {
                a
            }
        }
      }

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

一、认识​

二、编译配置​

三、命令管理​

3.1 配置编译产物​

3.2 开启 SourceMap​

3.3 运行命令，编译产物​

四、运行调试​

4.1 render​

4.2 compile​

4.3 createApp​