Vue.js如何寫一個簡單的原生js模塊，瀏覽器中的表現如何？

時間 2019-11-13

標籤 vue.js vue 如何一個簡單原生模塊瀏覽器表現欄目 JavaScript 简体版

原文原文鏈接

瀏覽器正在逐步的支持原生JavaScript模塊。Safari和Chrome的最新版本已經支持它們了，Firefox和Edge也將很快推出。html

若是您是一個vue.js用戶，那關於JavaScript模塊一個很酷的事就是他們容許您編寫您的組件到本身的文件中而無需任何多餘的構建步驟。vue

在這篇文章中，我將向您展現如何編寫一個JavaScript模塊到一個文件中，並在vue.js APP中使用它。您能夠在瀏覽器中就作到這一切而不須要Babel或者Webpack！node

當我說到「單文件組件」時，我所說的是一個JavaScript文件，它exports一個完整的組件定義。我說的不是您已經習慣使用的單一的.vue文件。對不起，若是您很失望的話，但我仍然認爲這很酷，因此來看一下。webpack

項目配置

讓咱們使用Vue-cli的simple模板來試試。沒錯，不須要WebPack；）git

$ vue init simple sfc-simple

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

切換到相應的目錄並建立咱們須要的文件：web

$ 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.jsbabel

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加載的並非模塊：