vue2+ts項目中實現自動註冊import的函數的失敗經歷

背景

當咱們在用vue2+ts的時候，若是咱們須要在template裏面使用某一個函數，就必需要先從其餘文件中引入這個函數，而後在class中再註冊一下，例以下面的代碼: 這種寫法有些組員提出來不是十分的優雅，我也以爲若是要是能直接使用那就更好了，就更加的方便了。因此這篇文章記錄了我爲了實現這個功能所作出的嘗試，最後的結果是失敗了，只是在過程當中學到了一些mixin、裝飾器和webpack插件的一些知識，爲本身作一下記錄，若是你們可以幫助我實現，那就太好了，我就能夠去組裏吹一波了。

裝飾器

首先我想到的方法是利用裝飾器。什麼是裝飾器？以個人理解，裝飾器若是類比生活中例子，就好比你新買了一臺車，他是針織的座椅，可是你不喜歡，你買了一個真皮的座椅套套在了外面。你並無改變原來的座椅任何一點，可是這個座椅變成你喜歡的樣子了。就像我在上面背景中展現的代碼，@Component就是vue-property-decorator這個庫裏面的其中一個裝飾器，把這個裝飾器寫在class上面，class裏面的代碼你就能夠按照這個庫規定的方式去寫了，你就能夠即便用vue又可使用ts了。因而乎，我想要實現這個class中免註冊的功能就總共分爲兩部分。

第一部分就是我須要知道我import進來了哪些函數，第二部分是把這些函數在我本身寫的decorator中怎麼註冊到vue上。兩個聽着都很是不靠譜，但我也做死的往下走走看。先放下第一個，主攻第二個。想實現第二部分，我首先須要清楚怎麼用裝飾器。js的裝飾器分爲：類裝飾器、方法裝飾器、屬性裝飾器、還有訪問符裝飾器和參數裝飾器。
當使用多個裝飾器的時候，他們的運行順序是 屬性裝飾器 -> 訪問符裝飾器 -> 方法裝飾器 -> 參數裝飾器 -> 類裝飾器 具體的每個用法在這個連接中www.tslang.cn/docs/handbo…

在vue-property-decorator中，@Component這個裝飾器，他是一個類裝飾器，那咱們就僅說一下類裝飾器。類裝飾器就是一個函數，它的第一個參數就是他下面這個類的構造器，舉個例子 咱們經過target.prototype就能獲取到vue的實例，由於咱們的class是繼承了Vue的。@Component裝飾器將將咱們寫在class下面的函數還有data等一系列vue的代碼，註冊到vue的實例上面，下面截圖是源碼的一部分 源碼的連接

這樣在template裏面就能夠用了，那咱們也能夠在咱們自定義的這個類裝飾器裏面，將咱們import進來的這些函數掛在這個vue的實例裏面就能夠了，可是如何在自定義的裝飾器裏面獲取到import的函數，我一直沒有找到方法。

mixin

苦於沒法找到方法解決裝飾器中獲取import值，並且在每一個@Component裝飾器下面還要寫一個自定義的裝飾器，這也要一些工做量，因此我就在想能不能想一個辦法在全局寫一次就能夠了。這時就想到了用mixin。
mixin可讓咱們在全局混入一個created生命週期函數，這樣在每一個vue文件都會先執行一下這個mixin的函數，那咱們在這個函數中註冊import進來的函數就能夠了。此處須要注意一點就是，當一個組件有created函數時，又有mixin的created函數時，先執行mixin的，而後再執行自己的created函數。

require.context

接下來想辦法解決知道引入了哪些函數，我思來想去想出一個不成熟的辦法。咱們通常會把公共工具函數放在utils這個文件夾下面，而一些自定義的局部工具函數，放在當前文件夾下面再創建一個自定義名字的文件夾。而後利用require.context方法，由於require.context是webpack的一個api，可讓咱們獲得一個文件夾下面全部export出來的函數,例以下面的代碼 可是這樣雖然可以獲取全部的export出來的函數，而後把他們註冊到vue上，可是這是獲取了全部，我只想要我import了哪些函數，因此核心問題仍是如何獲取到import引入的值。因此require.context更加適合當咱們須要把整個文件夾下面的文件所有導入時，利用require.context進行動態的批量導入。

webpack plugin

webpack的插件提供了一些鉤子函數，好比JavascriptParser Hooks，咱們再利用normalModuleFactory能夠進一步使用import這個鉤子，這樣就能夠在全部import的地方觸發這個鉤子了。寫法以下 但這個功能也仍是不適合解決個人問題，由於仍是全局的，並且數據處理起來很是的困難。webpack插件仍是更加適合處理相似去除多餘console.log等問題。

結尾

嘗試了幾種方法，但由於水平不夠，仍是沒法實現import後直接在vue中註冊好所需的函數。做者是第一次寫文，也算是求助帖，下面的留言區能夠吐槽能夠噴，但要是能給出解決方案更加感激。書寫此文，一是尋求大佬幫助，二是由於折騰了好幾天，不寫出來感受幾天啥也沒幹同樣，因此鼓足勇氣，做死發文。