webpack之打造Javascript類庫

最近有個需求，須要將組件庫打包爲類庫，提供給各項目使用，而且不打包進項目中，優化各項目切換時的資源加載，可是又不想影響咱們在程序中的寫法（以import方式引用使用）。

webpack的externals配置提供了這種方法。

externals

防止將某些 import 的包(package)打包到 bundle 中，而是在運行時(runtime)再去從外部獲取這些擴展依賴(external dependencies)。

例如，從 CDN 引入 jQuery，而不是把它打包：

index.html

<script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script>
複製代碼

webpack.config.js

module.exports={
    //...
    externals: {
        jquery:'jQuery'
    }
};
複製代碼

這樣就剝離了那些不須要改動的依賴模塊，換句話，下面展現的代碼還能夠正常運行：

import $ from 'jquery';
$('.my-element').animate(/* ... */);
複製代碼

具備外部依賴(external dependency)的 bundle 能夠在各類模塊上下文(module context)中使用。

所以，咱們找到了如何使用咱們本身的類庫的方法，將該配置加入要使用的項目中，並在html中添加本身的類庫的腳本便可（myLibrary是咱們接下來將要導出的類庫全局變量名）

webpack.config.js

module.exports={
    //...
    externals: {
        'my-library': 'myLibrary'
    }
};
複製代碼

那麼一切都準備好了，接下來咱們應該怎麼將咱們的組件庫打包成類庫呢？ 咱們將下面這段配置加入要打包的本身的類庫中：

webpack.config.js

module.exports = {
  //...
  output: {
    library: 'myLibrary',
    libraryTarget: 'umd'
  }
};
複製代碼

在這個例子中，你須要 library 屬性來命名你的模塊。 library: 定義類庫的全局變量名，當經過 script 腳本引入時使用 libraryTarget: "umd" - 爲了使你的類庫更通用，這裏選擇使用umd，將你的 library 暴露爲全部的模塊定義下均可運行的方式。它將在 CommonJS, AMD 環境下運行，或將模塊導出到 global 下的變量。