不使用 webpack 或 browserify 将 .vue 文件编译成 .js 文件

Posted

技术标签:

【中文标题】不使用 webpack 或 browserify 将 .vue 文件编译成 .js 文件【英文标题】：Compile .vue file into .js file without webpack or browserify 【发布时间】：2017-10-02 11:18:11 【问题描述】：

有没有办法在没有 webpack 或 browserify 的情况下将 .vue 文件编译成 .js 文件？我知道 webpack 或 browserify 的优点，但我只想要最简单的方法来编译 .vue 文件。例如，我有一个单一的文件组件 comp.vue 编译成 comp.js （编译器应该能够编译 .vue 文件中的 sass 和 pug），然后我可以在我的应用程序中使用它，如下所示：

<head>
    <script src="vue.min.js"></script>
    <script src="comp.js"></script> //it may pack the whole component into variable comp and add the style
    <script>
        Vue.component('comp', comp);
        window.onload = function() 
            new Vue(el: '#app');
        
    </script>
</head>
<body id='app'>
    <comp></comp>
</body>

或其他类似/更简单的方式？

【问题讨论】：

你可以使用gulp Gulp+browserify+vueify？没有更简单的编译方法？ 没有。最简单的方法是不使用 *.vue 文件 【参考方案1】：

vue-cli 工具（2.8.0 版）有一个build 命令，您可以运行该命令来构建单个组件。

vue build Component.vue --prod --lib

这将创建一个 UMD 格式的优化包，以及 导出的库设置为组件，可以使用--lib [CustomLibraryName] 对其进行自定义。

您可以获取构建的脚本并将其包含在您的文件中，就像您在问题中一样。从技术上讲，它确实在后台使用 webpack，但您无需配置任何东西。

【讨论】：

截至 2017 年，他们似乎有了删除此类命令的好主意。所以我猜它又回到了gulp？呃…… @JacqueGoupil 我相信计划是将其移动到 vue cli 的插件中。看起来他们可能正在这样做。当我发现更多信息时，我会更新答案。 @JacqueGoupil 构建工具在 v2.8.0 中仍然可用。我现在建议如果您想使用它，请使用该版本。我用正确的链接更新了答案。 谢谢，我试试看。 在 2.9.* 中，他们删除了这个命令。相反，他们建议使用poi (github.com/egoist/poi)。【参考方案2】：

2021 回答：使用vue build my-component.vue -t lib 命令。这个可以用npm i -g @vue/cli-service-global安装

vue build 将在 dist/ 目录中创建 javascript。使用&lt;script&gt; 标记将my-component.umd.js 添加到您的页面。

此时，my-component 在 window 对象上可用。这是一个注册示例：

    <script src="https://unpkg.com/vue"></script>
    <script src="dist/my-component.umd.js"></script>
    <script>
    new Vue(
      components: 
        "my-component": window["my-component"]
      
    ).$mount('#app')
    </script>

【讨论】：

那么我们在开发过程中是否需要多次构建它才能看到它是如何运行的呢？如果是这样，开发将变成一场噩梦。 为了实际开发，我已经转向运行 vue cli dev server 并单独开发组件。我创建了一个简单的测试工具应用程序，该应用程序在根目录中包含有问题的组件。这提供了热重载开发设置。完成开发后，我使用 vue build 进行构建并将其集成到我的站点中。最困难的事情是让 XSS 和 Cookie 的所有 HTTP 标头正常工作。由于开发服务器在不同的主机/端口上运行，因此我的应用程序的开发实例。你是对的，构建时间很糟糕。我也试过推出。这也是可怕的构建时间。【参考方案3】：

（声明：作者在此）

vue3-sfc-loader（适用于 Vue2 和 Vue3）允许您直接从浏览器（无需 webpack 或 node.js）加载 .vue 文件（包括其依赖项）。

vue3-sfc-loader 支持模板和样式预处理器（参见examples）

【讨论】：

【参考方案4】：

我建议使用这个命令

npm install -g @vue/cli-service-global
npx @vue/cli build -t lib -d output input/app.vue

更多信息类型

npx @vue/cli build --help

【讨论】：

以上是关于不使用 webpack 或 browserify 将 .vue 文件编译成 .js 文件的主要内容，如果未能解决你的问题，请参考以下文章

我应该使用 Browserify 还是 Webpack 来延迟加载 Angular 1.x 中的依赖项 [关闭]

什么是 CommonJS、AMD、WebPack、Browserify 等？

任务运行程序（Gulp、Grunt 等）和捆绑程序（Webpack、Browserify）。为啥要一起使用？

Browserify有替代品吗？ [关闭]

NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack [关闭]

Gulp / Grunt和browserify / webpack之间的关系