1. 程式人生 > >vue.js如何寫一個簡單的原生js模組,瀏覽器中的表現如何?

vue.js如何寫一個簡單的原生js模組,瀏覽器中的表現如何?

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,效能有什麼差別嗎?

SizeTime to first meaningful paint
JavaScript modules80.7 KB2460 ms
Webpack83.7 KB2190 ms

使用模組,系統可以提供較小的專案。然而,該專案的整體負載WebPack更快。

注意:這些數字來自Lighthouse測試,其中有一個HTTP / 2伺服器。

我懷疑預載入會提高模組專案的速度,但是我們這麼評判這項工作有點早。

WebPack仍是模組架構的更好選擇,但當它瞭解本地模組的話應該也會很高興。

​匯智網小智翻譯,文章來自vuejsdevelopers.com。匯智網提供vue.js 2、Angular 2 & 5、React 等最新線上課程,希望能給大家的學習帶來幫助!

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