Question

Use browserify transforms as webpack-loader.

安装

npm i transform-loader --save

用法

通过查询参数(query parameter)来传递模块名。

var x = require("!transform-loader?brfs!./file.js");
var x = require("!transform-loader/cacheable?brfs!./file.js"); // 可缓存版本

如果你传递了一个数字，将得到 this.options.transforms[number] 中的函数。

webpack 2 配置示例

module.exports = {
  module: {
    rules: [
      {
        loader: "transform-loader?brfs",
        enforce: "post",
        options: {
          transforms: [
            function (/*file*/) {
              return through((buffer) => {
                return this.queue(
                  buffer.split('')
                    .map((chunk) => String.fromCharCode(127-chunk.charCodeAt(0))))
                    .join('')
              }, () => this.queue(null))
            }
          ]
        }
      },

      {
        test: /\.coffee$/,
        loader: "transform-loader/cacheable?coffeeify",
        options: {
          transforms: [
            function (/*file*/) {
              return through((buffer) => {
                return this.queue(
                  buffer.split('')
                    .map((chunk) => String.fromCharCode(127-chunk.charCodeAt(0))))
                    .join('')
              }, () => this.queue(null))
            }
          ]
        }
      },

      {
        test: /\.weirdjs$/,
        loader: "transform-loader?0",
        options: {
          transforms: [
            function (/*file*/) {
              return through((buffer) => {
                return this.queue(
                  buffer.split('')
                    .map((chunk) => String.fromCharCode(127-chunk.charCodeAt(0))))
                    .join('')
              }, () => this.queue(null))
            }
          ]
        }
      }
    ]
  }
};

webpack 1 配置示例

module.exports = {
  module: {
    postLoaders: [
      {
        loader: "transform-loader?brfs"
      }
    ]
    loaders: [
      {
        test: /\.coffee$/,
        loader: "transform-loader/cacheable?coffeeify"
      },
      {
        test: /\.weirdjs$/,
        loader: "transform-loader?0"
      }
    ]
  },
  transforms: [
    function(file) {
      return through(function(buf) {
        this.queue(buf.split("").map(function(s) {
          return String.fromCharCode(127-s.charCodeAt(0));
        }).join(""));
      }, function() { this.queue(null); });
    }
  ]
};

典型 brfs 示例

假如你有下面这样的 Node 源码：

var test = require('fs').readFileSync('./test.txt', 'utf8');

在 npm install transform-loader brfs --save 之后，添加如下 loader 到你的配置中：

module.exports = {
    context: __dirname,
    entry: "./index.js",
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: "transform-loader?brfs"
            }
        ]
    }
}

loader 将应用到所有 JS 文件，这样在执行 watch 任务时将导致性能提醒。因此你也许需要使用带缓存的版本 transform-loader/cacheable?brfs。