{"id":23799431,"url":"https://github.com/yangjunlong/compile-vue-demo","last_synced_at":"2025-09-06T13:32:51.135Z","repository":{"id":102652133,"uuid":"148123933","full_name":"yangjunlong/compile-vue-demo","owner":"yangjunlong","description":"编译vue单文件组件","archived":false,"fork":false,"pushed_at":"2023-11-23T06:41:24.000Z","size":168,"stargazers_count":27,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-07T04:34:08.932Z","etag":null,"topics":["rollup","vue","webpack"],"latest_commit_sha":null,"homepage":"https://yangjunlong.github.io/compile-vue-demo/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yangjunlong.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2018-09-10T08:32:17.000Z","updated_at":"2024-11-01T02:09:03.000Z","dependencies_parsed_at":null,"dependency_job_id":"bd7a9cbc-70df-4f64-b6bb-92744d504152","html_url":"https://github.com/yangjunlong/compile-vue-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/yangjunlong/compile-vue-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yangjunlong%2Fcompile-vue-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yangjunlong%2Fcompile-vue-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yangjunlong%2Fcompile-vue-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yangjunlong%2Fcompile-vue-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yangjunlong","download_url":"https://codeload.github.com/yangjunlong/compile-vue-demo/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yangjunlong%2Fcompile-vue-demo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273912608,"owners_count":25189969,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-06T02:00:13.247Z","response_time":2576,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["rollup","vue","webpack"],"created_at":"2025-01-01T21:16:21.284Z","updated_at":"2025-09-06T13:32:50.788Z","avatar_url":"https://github.com/yangjunlong.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 编译vue单文件组件\n\n\n### 背景\n\nVue官方定义了一种名叫单文件组件(SFC)规范的*.vue文件，用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 `\u003ctemplate\u003e`、`\u003cscript\u003e` 和 `\u003cstyle\u003e`，还允许添加可选的自定义块：\n\n```jsx\n\u003ctemplate\u003e\n  \u003cdiv class=\"example\"\u003e{{ msg }}\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  data () {\n    return {\n      msg: 'Hello world!'\n    }\n  }\n}\n\u003c/script\u003e\n\n\u003cstyle\u003e\n.example {\n  color: red;\n}\n\u003c/style\u003e\n\n\u003ccustom1\u003e\n  This could be e.g. documentation for the component.\n\u003c/custom1\u003e\n```\n为此Vue的官方为`webpack`提供了`vue-loader`，它会解析`.vue`文件，提取每个语言块，如有必要会通过其它 loader 处理，最后将他们组装成一个 ES Module，它的默认导出是一个 `Vue.js` 组件选项的对象。\n\n`vue-loader` 支持使用非默认语言，比如 CSS 预处理器，预编译的 HTML 模版语言，通过设置语言块的 lang 属性。例如，你可以像下面这样使用 Sass 语法编写样式：\n\n```sass\n\u003cstyle lang=\"sass\"\u003e\n  /* write Sass! */\n\u003c/style\u003e\n```\n详情见[https://vue-loader.vuejs.org/zh/](https://vue-loader.vuejs.org/zh/)\n\n### 开始\n大部分情况下我们开发Vue项目是通过vue脚手架快速生成一个项目骨架而开始的\n\n```sh\nvue init webpack my-vue-project\n```\n\n然后我们在这个项目中编写.vue单文件组件，通过：\n\n```\nnpm run build \n```\n\n构建整个项目，将产出的文件发布上线，事实上在整个项目构建过程中我们并不知道.vue文件到底发生了什么。当然如果只是单纯通过这种方式来开发一个Vue的单页项目，其实也并不需要了解太多细节，我们只需要按照给定的项目规范编写业务代码即可，但这种傻瓜式的开发配置，有时候并不能满足多变的需求。\n\n### 想法\n既然Vue官方已经定义了一种单文件组件(SFC)规范的东东，我们何不借来使用：实现组件的平台化。我们提供一个.vue组件编辑器供用户使用，编辑完成后单击保存，即可看到该组件渲染之后的页面。\n\n在这个过程中会涉及到如何编译.vue单文件组件，以及动态/异步渲染vue单文件组件，本文主要记录编译vue单文件组件的几种方法：\n\n### rollup\n\u003e Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。ES6 模块最终还是要由浏览器原生实现，但当前 Rollup 可以使你提前体验。\n\n\n项目里的`public/rollup.html`文件为rollup编译的入口文件，通过运行下面的命令进行编译：\n```\nyarn build:rollup\n```\n\n### webpack\n\n项目里的`public/index.html`文件为webpack编译方式的入口文件，通过运行下面的命令来编译:\n\n```\nyarn build:webpack\n```\n\n### gulp\n\n\n### parcel\n\n### 平台化？\n上面的两种编译.vue的方法，也只是我们借助工具经过简单配置来实现的，尽管实现了.vue单文件组件的编译，但还是不够友好，或者说我们还是不能方便的使用，他们仍然是要通过编译文件的形式来解析代码，是否可以以一种服务的形式存在直接解析/编译从前端编辑器POST过来的.vue单文件组件代码？我们后面文章将继续介绍~~\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyangjunlong%2Fcompile-vue-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyangjunlong%2Fcompile-vue-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyangjunlong%2Fcompile-vue-demo/lists"}