专栏首页极客编程Vue.js如何写一个简单的原生js模块,浏览器中的表现如何?

Vue.js如何写一个简单的原生js模块,浏览器中的表现如何?

浏览器正在逐步的支持原生JavaScript模块。Safari和Chrome的最新版本已经支持它们了,Firefox和Edge也将很快推出。

如果您是一个vue.js用户,那关于JavaScript模块一个很酷的事就是他们允许您编写您的组件到自己的文件中而无需任何多余的构建步骤。

在这篇文章中,我将向您展示如何编写一个JavaScript模块到一个文件中,并在vue.js APP中使用它。您可以在浏览器中就做到这一切而不需要Babel或者Webpack!

当我说到“单文件组件”时,我所说的是一个JavaScript文件,它exports一个完整的组件定义。我说的不是您已经习惯使用的单一的.vue文件。对不起,如果您很失望的话,但我仍然认为这很酷,所以来看一下。

项目配置

让我们使用Vue-cli的simple模板来试试。没错,不需要WebPack;)

$ vue init simple sfc-simple

本教程完整的源代码在GitHub。(https://github.com/anthonygore/vue-single-file-js-components)

切换到相应的目录并创建我们需要的文件:

$ cd sfc-simple
$ touch app.js
$ touch SingleFileComponent.js

从index.html中删除内联脚本,改为使用脚本标记链接到我们的模块。请注意type="module"属性:

<!DOCTYPE html>
<html>
<head>
 <title>Vue.js Single-File JavaScript Component Demo</title>
     <script src="https://unpkg.com/vue"></script>
</head>
<body>
 <div id="app"></div>
     <script type="module" src="SingleFileComponent.js"></script>
     <script type="module" src="app.js"></script>
</body>
</html>

创建单个文件JavaScript组件

这是一个与您创建的任何其他组件一样的组件,因为它是一个模块所以只是export 配置对象:

SingleFileComponent.js

export default {
 template: `
   <div>
    <h1>Single-file JavaScript Component</h1>
    <p>{{ message }}</p>
   </div>  
 `,
 data() {
   return {
     message: 'Oh hai from the component'
   }
 }
}

现在我们就可以在Vue的应用中import并使用它了:

app.js

import SingleFileComponent from 'SingleFileComponent.js';

new Vue({

 el: '#app',

 components: {

   SingleFileComponent

 }
});

index.html

<div id="app">

 <single-file-component></single-file-component>

</div>

应用程序中运行

对于像这样的一个简单项目,您只需要在命令行上使用HTTP服务器模块的静态服务器即可:

# This will serve the project directory at localhost:8080

$ http-server

要查看这个应用程序,您当然需要使用支持JavaScript模块的浏览器。我用的是Chrome 61。

回退处理

如果用户的浏览器不支持JavaScript模块呢?对大多数用户来说是这只是暂时的。

我们可以用nomodule属性脚本标签写的一个简单的错误信息的文件:

<body>

 <div id="app">

   <single-file-component></single-file-component>

 </div>

 <script type="module" src="SingleFileComponent.js"></script>

 <script type="module" src="app.js"></script>

 <script nomodule>

   document.getElementById("app").innerHTML 
         = "Your browser doesn't support JavaScript modules :(";

 </script>

</body>

一个更好的办法,是使用WebPack打包这个项目。下面这个简单的配置将完成这项工作:

var path = require('path')
var webpack = require('webpack')
module.exports = {

 entry: './app.js',

 output: {

   path: path.resolve(__dirname, './dist'),

   publicPath: '/dist/',

   filename: 'build.js'

 },

 module: {

   rules: [

     {

       test: /\.js$/,

       loader: 'babel-loader',

       exclude: /node_modules/

     }

   ]

 }}

生成之后,可以将该包作为回退脚本加载:

<body>

 ...  
 <script type="module" src="SingleFileComponent.js"></script>

 <script type="module" src="app.js"></script>

 <script nomodule src="/dist/build.js"></script>

</body>

这WebPack版本将在不同浏览器中的原生模块支持。在这里,它是在Firefox中,注意build.js加载的并不是模块:

性能比较

因为现在我们的应用程序的两个版本,一个使用本地JavaScript模块系统,另外一个使用Webpack,性能有什么差别吗?

Size

Time to first meaningful paint

JavaScript modules

80.7 KB

2460 ms

Webpack

83.7 KB

2190 ms

使用模块,系统可以提供较小的项目。然而,该项目的整体负载WebPack更快。

注意:这些数字来自Lighthouse测试,其中有一个HTTP / 2服务器。

我怀疑预加载会提高模块项目的速度,但是我们这么评判这项工作有点早。

WebPack仍是模块架构的更好选择,但当它了解本地模块的话应该也会很高兴。

​汇智网小智翻译文章来自vuejsdevelopers.com。

汇智网,www.hubwiz.com提供vue.js 2、Angular 2 & 5、React 等最新在线课程,希望能给大家的学习带来帮助!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React快速入门

    React是Facebook开源的一个用于构建用户界面的Javascript库,已经 应用于Facebook及旗下Instagram。

    笔阁
  • 打包利器webpack

    Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

    笔阁
  • Apache spark 的一些浅见。

    分布并行计算和几个人一起搬砖的意思是一致的,一个资源密集型的任务(搬砖或计算),需要 一组资源(小伙伴或计算节点),并行地完成:

    笔阁
  • jQuery日期和时间插件(jquery-ui-timepicker-addon.js)中文破解版使用

    简介 jQuery UI Datepicker日期选择插件很好用了,只不过只能精确到日,不能选择时间(小时分钟秒)很遗憾,而jquery-ui-timepick...

    Java中文社群_老王
  • jQuery打造智能提示插件二(可编辑下拉框)

    在上一篇 jQuery打造智能提示插件 上改进,增加下拉按钮,修复点击下拉区域外不隐藏BUG 效果 ? js封装,注意红色部分为BUG修复,然后传入boxwid...

    欢醉
  • ECSHOP整合百度ueditor编辑器方法 支持远程图片本地化

    image.png ECSHOP商城自带的编辑器实在是不能忍,太难用了。 就换成了百度的ueditor编辑器,本来最近修改了几个商城的,索性自己也记录一次吧。 ...

    速企云
  • 给你的小站加上鼠标点击特效

    叮当叮
  • 用于 Windows8 的 Wijmo Charts 图表控件

    随着Windows 8 Developer Preview 和 Visual Studio 11 Preview的发布, 大家对Metro-style的关注也逐...

    葡萄城控件
  • 利用JQuery的ajax请求实现文件上传

    今天给大家介绍一下如何利用JQuery的ajax请求实现文件上传功能。 主要需要引入一个js文件,然后调用js文件中的ajaxFileUpload请求就可以实现...

    林老师带你学编程
  • CentOS6.5菜鸟之旅:文件权限详解

    一、前言                                   Linux下所有资源、设备均被视作文件来操作,而文件权限则是决定用户可各文件操作的...

    ^_^肥仔John

扫码关注云+社区

领取腾讯云代金券