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

2020-05-16 06:52:05

首先,我要说的是: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上查看完整的代码。