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 Native智能开发工具,可代码提醒的IDE—VS Code

(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) VS Code是一个专门为React Nat...

3745
来自专栏韩东吉的Unity杂货铺

零基础入门 7: 创建自己的菜单

在上一篇菜单介绍分享之后,有一些小伙伴在后台留言说能不能分享下如何创建自定义的菜单栏?怎么创建?

1074
来自专栏雪胖纸的玩蛇日常

Vue学习(4)

1.{{}}模板语法、插值、简单运算 2.指令系统 v-if 真正销毁重建 v-show 更改css的display,用于重复切换出现

622
来自专栏前端儿

iPhone页面的常用调试方法

某些页面需要设置HOST才能进行访问,在iPhone上不好设置HOST,所以需要一些代理工具帮助我们

3691
来自专栏有困难要上,没有困难创造困难也要上!

iOS提交Appstore时报错: iTunes Store operation failed.

37612
来自专栏魏艾斯博客www.vpsss.net

宝塔 linux 面板常见问题解答

7135
来自专栏liuchengxu

Vim 插件管理器概览

一个 Vim 插件不过是 Vim 启动时自动加载的 Vim script 脚本而已. Vim 启动时会自动加载 runtimepath 中的 plugin 子目...

762
来自专栏阮一峰的网络日志

短网址还原的Bookmarklet

如今,很多网站提供短网址服务。 ? 但是有时候,我们需要知道真实网址是什么。 ? 一个个点击,实在太麻烦。何况在国内,很多网址是点不开的。 我一直希望,有人做一...

3418
来自专栏freesan44

加载RAM磁盘编译Xcode项目

每次对Xcode iOS项目进行clean、build或者在iOS虚拟机上launch,Xcode都会在DeriveData文件夹中进行读写操作。换句话说,就是...

982
来自专栏BY的专栏

忽略Xcode8.0中的注释警告⚠️

36010

扫码关注云+社区

领取腾讯云代金券