vue.js如何写一个简单的原生js模块,浏览器中的表现如何?-阿里云开发者社区

开发者社区> 开发与运维> 正文

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

简介: 请点击此处输入图片描述 浏览器正在逐步的支持原生JavaScript模块。Safari和Chrome的最新版本已经支持它们了,Firefox和Edge也将很快推出。

593b00050e0719277f53

请点击此处输入图片描述

浏览器正在逐步的支持原生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。

593f0000c82e9863fc88

请点击此处输入图片描述

回退处理

如果用户的浏览器不支持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加载的并不是模块:

59420000d874ce0db1fe

请点击此处输入图片描述

性能比较

因为现在我们的应用程序的两个版本,一个使用本地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。汇智网提供vue.js 2、Angular 2 & 5、React 等最新在线课程,希望能给大家的学习带来帮助!


分享最新的Vue.js 2 全家桶系列教程:

1.vue.js 入门与提高: http://xc.hubwiz.com/course/592ee9b2b343f27b0ae1ba99

2.vuex 2 入门与提高: http://xc.hubwiz.com/course/597d463fff52d0da7e3e397a

3.vue-router 入门与提高: http://xc.hubwiz.com/course/5983d3aeff52d0da7e3e3d50

4.vue.js 工程化实践: http://xc.hubwiz.com/course/598bad66c7fd1d49453979c9



版权声明:本文首发在云栖社区,遵循云栖社区版权声明:本文内容由互联网用户自发贡献,版权归用户作者所有,云栖社区不为本文内容承担相关法律责任。云栖社区已升级为阿里云开发者社区。如果您发现本文中有涉嫌抄袭的内容,欢迎发送邮件至:developer2020@service.aliyun.com 进行举报,并提供相关证据,一经查实,阿里云开发者社区将协助删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章