1. Transform Loader

Use browserify transforms as webpack-loader.

1.1. 安装

npm i transform-loader --save

1.2. 用法

将模块名称作为查询参数传递。

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

如果你传递的是一个数字，它就会从this.options.transforms[number] 中得到这个函数。

1.3. 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))
              }
          ]
        }
      }
    ]
  }
};

1.4. 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); });
        }
    ]
};

1.5. 典型的 brfs 示例

假设您有以下 Node 源:

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

After 在运行 npm install transform-loader brfs --save 安装完成之后，, 添加下面的loader到配置中:

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