browserify-loader 介紹

時間 2019-11-09

標籤 browserify loader 介紹简体版

原文原文鏈接

爲何須要 browserify-loader

最近在寫一個模塊加載器，叫作 browserify-loader。大名鼎鼎的 browserify 你們必定不陌生。 browserify-loader 的目標就是爲在使用 browserify 開發是提供另一種把 CommonJS 模塊加載到瀏覽器端的選擇。javascript

有了 browserify-loader，開發時，無需再使用 watchify、browerify-middleware 這樣的工具來自動打包模塊，提供打包後的模塊服務。html

browserify-loader 與 requirejs 或者 seajs 相似，可是：java

與 Node 同樣，使用 Modules/1.1.1 規範
無需添加包裹函數 define()
兼容全部 npm 模塊，全部支持 CommonJS 的 bower 模塊，好比 underscore、backbone和 jQuery 等等。

快速入門

安裝

使用 bower 或者 npm 安裝 browserify-loader：node

$ npm install browserify-loader

在頁面中加入 browserify-loader.js 的引用，像下面這樣：git

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
    <script type="text/javascript"
      src="node_modules/browserify-loader/browserify-loader.js"></script>
</body>
</html>

就這麼簡單，接下來，browserify-loader 就會到當前的地址（location.origin）去尋找 package.json 進而加載 main 所指定的模塊，默認即 index.js 模塊。github

可選的參數

目前 browserify-loader 支持兩個參數，main 和 package：chrome

<script type="text/javascript"
        id="bl-script"
        main="backbone/app.js"
        package="backbone/"
        src="node_modules/browserify-loader/browserify-loader.js"></script>

main：入口模塊，就像 node app.js 中的 app.js
package：指定 browserify-loader 查找 package.json 的位置

注意，main 的優先級高於 package 的；若是你要使用參數，id="bl-script" 是必須的。npm

示例

todomvc-in-bl 這個項目如今包含一個 Backbone 版 Todo 應用，就是基於 todomvc 的。示例中的代碼模塊都是使用 CommonJS 規範編寫的，而後直接經過 browserify-loader 加載到瀏覽器端執行。json

歡迎意見和反饋，Github：@island205 微博：@寸志瀏覽器

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。