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

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

vue.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。

vue.js

回退处理

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

vue.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 等最新在线课程,希望能给大家的学习带来帮助!

原文发布时间为:2018年01月17日
原文作者:笔阁 

本文来源:开源中国 如需转载请联系原作者


目录
相关文章
|
8天前
|
JavaScript
浏览器插件crx文件--JS混淆与解密
浏览器插件crx文件--JS混淆与解密
31 0
|
8天前
|
JavaScript 前端开发 算法
vue js有哪些优点和缺点
vue js有哪些优点和缺点
|
7天前
|
Web App开发 JavaScript 前端开发
浏览器与Node.js事件循环:异同点及工作原理
浏览器与Node.js事件循环:异同点及工作原理
|
7天前
|
Web App开发 JavaScript 前端开发
解决Vue.js Devtools未检测到Vue实例的问题
解决Vue.js Devtools未检测到Vue实例的问题
|
7天前
|
数据可视化 JavaScript 定位技术
Cesium第1篇,CesiumJS第1篇,CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)
Cesium是一种基于WebGL开源的虚拟地球技术,可以用于构建高性能、跨平台的三维地球应用程序,它支持多种数据格式和地图服务,可以实现地球表面的高精度渲染、地形分析、数据可视化等功能。Cesium还提供了丰富的API和插件,方便开发者进行二次开发和定制化,且可免费商用,在航空航天、国防、城市规划、教育等领域得到了广泛应用。
34 0
Cesium第1篇,CesiumJS第1篇,CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)
|
8天前
|
JavaScript 前端开发 开发者
Vue路由及Node.js环境搭建
Vue.js 和 Node.js 是两个不同的技术,分别用于前端和后端开发,具有不同的用途和功能
5 1
|
8天前
|
JavaScript 前端开发 数据可视化
Three.js第2篇,加载glb / gltf模型,Vue加载glb / gltf模型(如何在vue中使用three.js,vue使用threejs加载glb模型)
Three.js 是一个用于在 Web 上创建和显示 3D 图形的 JavaScript 库。它提供了丰富的功能和灵活的 API,使开发者可以轻松地在网页中创建各种 3D 场景、模型和动画效果。可以用来展示产品模型、建立交互式场景、游戏开发、数据可视化、教育和培训等等。这里记录一下如何在Vue项目中使用Three.js
55 4
Three.js第2篇,加载glb / gltf模型,Vue加载glb / gltf模型(如何在vue中使用three.js,vue使用threejs加载glb模型)
|
8天前
|
JavaScript 前端开发
vue的论坛管理模块-文章评论02
vue的论坛管理模块-文章评论02
|
8天前
|
JavaScript Java
vue的论坛管理模块-文章查看-01
vue的论坛管理模块-文章查看-01
|
8天前
|
存储 JavaScript
报错permission.js:41 [Vue warn]: Property “showClose“ must be accessed with “$data.showClose“ because
报错permission.js:41 [Vue warn]: Property “showClose“ must be accessed with “$data.showClose“ because