@cbjwwwcode/sfc-loader

vue3-sfc-loader

根据开源项目 vue3-sfc-loader 修改优化使用, 分开打包含有jsx版本和未含有jsx版本用法和vue3-sfc-loader一样,window全局变量改成了 Vue3SfcRender

浏览器用法例子

<html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/vue@latest"></script>
    <script src="https://unpkg.com/@cbjwwwcode/sfc-loader/dist/umd/vue-compiler.umd.js"></script>
    <script src="https://unpkg.com/@cbjwwwcode/sfc-loader/dist/umd/index.umd.js"></script>
   <!-- 使用jsx -->
    <!-- <script src="https://unpkg.com/@cbjwwwcode/sfc-loader/dist/jsx/index-umd.js"></script> -->
    <script>
      const { loadModule } = window['Vue3SfcRender'];
      const options = {
        moduleCache: {
          vue: Vue,
        },
        async getFile(url) {
          const res = await fetch(url);
          if (!res.ok)
            throw Object.assign(new Error(res.statusText + ' ' + url), { res });
          return {
            getContentData: (asBinary) =>
              asBinary ? res.arrayBuffer() : res.text(),
          };
        },
        addStyle(textContent) {
          const style = Object.assign(document.createElement('style'), {
            textContent,
          });
          const ref = document.head.getElementsByTagName('style')[0] || null;
          document.head.insertBefore(style, ref);
        },
      };

      const SfcNode = Vue.defineAsyncComponent(() =>
        loadModule('./SfcNode.vue', options),
      )

      const app = Vue.createApp({
        components: { SfcNode },
        template: '<SfcNode></SfcNode>',
      });

      app.mount('#app');
    </script>
  </body>
</html>

pnpm 安装使用例子

pnpm add @cbjwwwcode/sfc-loader

<script setup lang="ts">
  import * as Vue from "vue"
  import { loadModule } from "@cbjwwwcode/sfc-loader"
  //使用jsx
  //import { loadModule } from "@cbjwwwcode/sfc-loader/jsx"
  const options = {
    moduleCache: {
      vue: Vue,
    },
    async getFile(url) {
      const res = await fetch(url);
      if (!res.ok)
        throw Object.assign(new Error(res.statusText + ' ' + url), { res });
      return {
        getContentData: (asBinary) =>
          asBinary ? res.arrayBuffer() : res.text(),
      };
    },
    addStyle(textContent) {
      const style = Object.assign(document.createElement('style'), {
        textContent,
      });
      const ref = document.head.getElementsByTagName('style')[0] || null;
      document.head.insertBefore(style, ref);
    },
  };

  const SfcNode = Vue.defineAsyncComponent(() =>
    loadModule('./SfcNode.vue', options),
  )

</script> 
<template>
  <SfcNode></SfcNode>
</template>  

More Examples

see all examples

Try It Online

https://codepen.io/franckfreiburger/project/editor/AqPyBr

Public API documentation

loadModule(path: string, options: Options): Promise<VueComponent>

dist/

• npm install vue3-sfc-loader
• jsDelivr CDN: https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.js
• UNPKG CDN: https://unpkg.com/vue3-sfc-loader

esm version: dist/vue3-sfc-loader.esm.js
umd version: dist/vue3-sfc-loader.js

• npm install vue3-sfc-loader (use 'vue3-sfc-loader/dist/vue2-sfc-loader.js')
• jsDelivr CDN: https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue2-sfc-loader.js
• UNPKG CDN: https://unpkg.com/vue3-sfc-loader/dist/vue2-sfc-loader.js

esm version: dist/vue2-sfc-loader.esm.js
umd version: dist/vue2-sfc-loader.js

Build your own version

Example: enable IE11 support
npx webpack --config ./build/webpack.config.js --mode=production --env targetsBrowsers="> 1%, last 8 versions, Firefox ESR, not dead, IE 11" check

see package.json "build" script
see browserslist queries

preliminary steps:

1. clone vue3-sfc-loader
2. (install yarn: npm install --global yarn)
3. run yarn install

How It Works

vue3-sfc-loader.js = Webpack( @vue/compiler-sfc + @babel )

more details

1. load the .vue file
2. parse and compile template, script and style sections (@vue/compiler-sfc)
3. transpile script and compiled template to es5 (@babel)
4. parse scripts for dependencies (@babel/traverse)
5. recursively resolve dependencies
6. merge all and return the component

Any Questions

:speech_balloon: ask in Discussions tab

Financial contributors

Many thanks to people that support this project !