再见webpack：在没有webpack的情况下构建Vue.js应用

首先，我要说的是：webpack太棒了！如果不是webpack，开发JavaScript应用程序看起来会很不一样。但通常情况下，我感觉很陌生，必须设置一个相当复杂的构建过程来构建一个相当简单的JavaScript应用程序。

在美好的过去，我的腰带上绑着一个洋葱，这是当时的风格，创建一个JavaScript应用程序很简单：创建一个.html文件，添加<；script>；标记，编写一些JavaScript，然后在浏览器中打开文件。

但是，真的有必要用webpack来构建现代的javascript应用吗？真的有必要用webpack来构建Vue.js驱动的应用吗？答案是否定的。由于本地浏览器对JavaScript模块的支持，构建功能强大的JavaScript应用程序比以往任何时候都更加容易，而无需使用任何构建工具。

今天这篇文章的目标是设置一个Vue.js项目，而不依赖于复杂的构建过程和大量的第三方依赖项。同时，我们不希望没有像代码拆分这样的强大功能，并且开发过程应该尽可能舒适。

如果您想查看本文中将看到的代码的实时示例，可以在Netlify上查看它，也可以在GitHub上查看完整的代码。

我们使用ES6模块来构建我们的应用程序，从5月9日起，所有主要浏览器都支持ES6模块。如果您还没有时间跟上这项新技术，我建议您阅读相关的MDN页面。

为了增强安全性，ES6模块遵循同源策略，这意味着我们必须运行本地服务器才能运行使用此技术的JavaScript应用程序。不幸的是，这意味着我们必须安装一个NPM依赖项--但我保证，这将是唯一的依赖项。

Browsersync不仅使运行本地Web服务器成为可能，而且还提供了在检测到文件更改时自动重新加载浏览器的功能-这在开发过程中特别方便，并且是webpack热重新加载功能的替代(不是很复杂)。

在安装Browsersync之后，我们可以将一个新的NPM脚本添加到我们的Package.json文件中，用它我们可以启动一个本地开发服务器。

在上面看到的启动脚本中，我们告诉Browsersync启动一台服务器，为src目录中的文件提供内容并监视其更改。--Single选项触发Browsersync服务器在SPA模式下工作。

因此，让我们开始构建我们的应用程序。在下面的代码块中，您可以看到我们的应用程序的基本目录和文件结构。

.├──包.json└──src├──Components├──index.html└──Main.js。

html文件是我们应用程序的核心，所以最好从这个文件开始。

<；！DOCTYPE html>；<；html>；<；head>；<；meta charset="；utf-8"；>；<；meta http-equv="；X-UA兼容&34；content="；IE=edge"；>；<；meta name="；viewport"；content=&。Title>；Hello World！--<；/Title&>；<；link HREF="；https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css"；rel="；>；<；！--这是Vue.js！--&>；<；script src="；https://cdn.jsdelivr.net/npm/vue/dist/vue.js"；>；的开发版本。<；/script>；<；script src="；/main.js"；type="；module"；>；<；/script>；<；/head>；<；body>；<；div id="；app&34；>；<；/div>；<；/body>；<；

在上面，您可以看到我们的应用程序所需的非常少的HTML代码。如您所见，我们将使用Tailwind CSS作为我们选择的CSS框架。但应用程序最重要的部分是JavaScript代码。使用第一个<；script>；标记，我们加载的Vue.js版本启用了一些开发控制台输出(不要在生产中使用它！)。第二个JavaScript文件是我们的应用程序的入口点-请注意script标记上的type=#34；module"；属性，它告诉浏览器这是一个使用ES6模块的JavaScript文件。main.js文件还不存在-所以让我们创建它。

在上面的代码片段中，您可以看到我们正在使用本机ES6导入语句来加载核心App组件，并使用它来创建Vue的根实例。注意，我们不需要导入Vue，因为我们直接从index.html文件中的CDN加载它。

如果我们现在运行我们的应用程序，我们会收到一个JavaScript错误，因为我们还没有App.js文件，让我们来解决这个问题。

//src/Components/App.js导出默认值{name：'；App'；，模板：`<；div class="；tainer mx-auto p-4"；>；<；h1>；Hello World<；/H1>；<；/div>；`，}；

在上面，您可以看到我们的核心App组件的一个非常基本的实现。我们已经添加了CONTAINER、MX-AUTO和P-4Tailwind CSS实用程序类，以实现应用程序的一些最小样式。

现在我们准备运行我们的应用程序并在浏览器中查看它。NPM Start启动本地服务器并打开默认浏览器。

到目前为止一切顺利，我们已经完成了基本应用程序结构的设置，至少在我看来，这比webpack参与要容易得多。但是到目前为止，我们的应用程序没有做任何有用的事情，所以让我们进行更改，以确保我们的方法符合现实世界的需求。

在本例中，我们将构建一个非常简单的组件来呈现用户列表。我们还希望能够加载有关用户的更多信息，以测试本机ES6动态导入功能(也称为。本地代码拆分)。不过请记住，目前并不是所有现代浏览器都支持ES6动态导入。我不会详细解释组件本身，因为本文的重点是展示没有webpack我们可以做什么，而不是一般如何使用Vue.js构建东西。

//src/Components/UserList.js Const UserInfo=()=>；IMPORT('；./UserInfo.js'；)；导出默认值{Name：'；UserList'；，Components：{UserInfo，}，Data(){Return{Users：[{img：'；https://placeimg.com/50/50/people/1'；，Name：'；Kentigern Paul'；，Department：'；Development'；，info：'；Lorem ipsum door sit amet，consetur sadipscing elitr，sed diam.'；，showInfo：false，}，//.]，}；}，template：`<；ul class="；list-Reset"；>；<；li v-for="；用户"；：key="；class="；弹性项-start mb-6"；>；<；img：src="；user.img"；：alt="；user.name"；class="；四舍五入的完整mr-4"；>；div>；<；h3 class="；text-Black"；>；{{user.name}}&。文本-灰-暗mb-2"；>；{{user.Department}}<；/p>；<；按钮class="；bg-蓝色悬停：bg-蓝-暗文本-白色py-1 px-2圆角"；@click="；user.showInfo=！user.showInfo"；>；{{！user.showInfo？'；了解更多'；：<；user-info v-if="；user.showInfo"；class="；mt-2"；>；{{user.info}}<；/user-info>；<；/div>；<；/li>；<；/ul>；`，}；

+从'；导入UserList。/UserList.js'；；+导出默认值{Name：'；App&39；，+Components：{+UserList，+}，模板：`<；div class="；容器mx-auto p-4"；>；-<；h1>；Hello World<；/h1>；+<；h1>；Users<；Users<。<；/user-list>；<；/div>；`，}；

在前两个片段中，我们创建了一个UserList和一个UserInfo组件。请注意，我们使用动态导入语句加载UserInfo组件。这意味着最初不会加载UserInfo组件，而是只有在用户单击其中一个“了解更多”按钮之后才会加载UserInfo组件。在第三个代码片段中，您可以看到如何在src/component/App.js文件中初始化新的UserList组件。

如果在浏览器中查看应用程序并打开浏览器开发工具的Network选项卡，可以看到UserInfo.js文件在初始页面加载时没有加载。单击其中一个了解更多按钮，并密切关注Network选项卡，以查看UnserInfo.js文件正在动态加载。没错，“代码拆分”基本上是免费的。

尽管由于现代浏览器的特性，我们几乎可以使用任何工具实现的功能令人印象深刻，但必须指出的是，如果不以某种方式依赖于构建步骤，您很可能无法构建一个可投入生产的网站。我们的小应用程序缺少代码缩小化，浏览器支持仅限于最新版本的浏览器(前提是我们用常规导入替换动态导入，而动态导入目前对浏览器的支持非常非常差)。

Vue.js单文件组件也被大大遗漏了。我们必须依赖全局样式，或者直接在JavaScript模板中使用内联样式，至少可以说这并不理想。

不过，我认为很有趣的是，很有可能构建一个快速原型或简单的应用程序，它只供使用现代浏览器的人在内部使用，而不必依赖复杂且高维护的webpack构建设置。

如果您不想查看本文中看到的代码的实时示例，可以在Netlify上查看它，也可以在GitHub上查看完整的代码。