1 | [![npm][npm]][npm-url]
|
2 | [![deps][deps]][deps-url]
|
3 | [![chat][chat]][chat-url]
|
4 |
|
5 | <div align="center">
|
6 |
|
7 | <a href="https://github.com/webpack/webpack">
|
8 | <img width="200" height="200" vspace="" hspace="25"
|
9 | src="https://cdn.rawgit.com/webpack/media/e7485eb2/logo/icon.svg">
|
10 | </a>
|
11 | <h1>Transform Loader</h1>
|
12 | <p>Use a browserify transforms as webpack-loader.<p>
|
13 | </div>
|
14 |
|
15 | <h2 align="center">Install</h2>
|
16 |
|
17 | ```bash
|
18 | npm i transform-loader --save
|
19 | ```
|
20 |
|
21 | <h2 align="center">Usage</h2>
|
22 |
|
23 | [Documentation: Using loaders](http://webpack.github.io/docs/using-loaders.html)
|
24 |
|
25 | Pass the module name as query parameter.
|
26 |
|
27 | ``` javascript
|
28 | var x = require("!transform-loader?brfs!./file.js");
|
29 | var x = require("!transform-loader/cacheable?brfs!./file.js"); // cacheable version
|
30 | ```
|
31 |
|
32 | If you pass a number instead it will take the function from `this.options.transforms[number]`.
|
33 |
|
34 | <h2 align="center">Webpack 2.x Config Example</h2>
|
35 |
|
36 | ``` javascript
|
37 | module.exports = {
|
38 | module: {
|
39 | rules: [
|
40 | {
|
41 | loader: "transform-loader?brfs",
|
42 | enforce: "post"
|
43 | },
|
44 | {
|
45 | test: /\.coffee$/,
|
46 | loader: "transform-loader/cacheable?coffeeify"
|
47 | },
|
48 | {
|
49 | test: /\.weirdjs$/,
|
50 | loader: "transform-loader?0"
|
51 | }
|
52 | ]
|
53 | },
|
54 | plugins: [
|
55 | new webpack.LoaderOptionsPlugin({
|
56 | options: {
|
57 | transforms: [
|
58 | function(file) {
|
59 | return through(function(buf) {
|
60 | this.queue(buf.split("").map(function(s) {
|
61 | return String.fromCharCode(127-s.charCodeAt(0));
|
62 | }).join(""));
|
63 | }, function() { this.queue(null); });
|
64 | }
|
65 | ]
|
66 | }
|
67 | })
|
68 | ]
|
69 | };
|
70 | ```
|
71 |
|
72 | <h2 align="center">Webpack 1.x Config Example</h2>
|
73 |
|
74 | ``` javascript
|
75 | module.exports = {
|
76 | module: {
|
77 | postLoaders: [
|
78 | {
|
79 | loader: "transform-loader?brfs"
|
80 | }
|
81 | ]
|
82 | loaders: [
|
83 | {
|
84 | test: /\.coffee$/,
|
85 | loader: "transform-loader/cacheable?coffeeify"
|
86 | },
|
87 | {
|
88 | test: /\.weirdjs$/,
|
89 | loader: "transform-loader?0"
|
90 | }
|
91 | ]
|
92 | },
|
93 | transforms: [
|
94 | function(file) {
|
95 | return through(function(buf) {
|
96 | this.queue(buf.split("").map(function(s) {
|
97 | return String.fromCharCode(127-s.charCodeAt(0));
|
98 | }).join(""));
|
99 | }, function() { this.queue(null); });
|
100 | }
|
101 | ]
|
102 | };
|
103 | ```
|
104 |
|
105 | <h2 align="center">Typical brfs Example</h2>
|
106 |
|
107 | Say you have the following Node source:
|
108 |
|
109 | ```js
|
110 | var test = require('fs').readFileSync('./test.txt', 'utf8');
|
111 | ```
|
112 |
|
113 | After `npm install transform-loader brfs --save`, add the following loader to your config:
|
114 |
|
115 | ```js
|
116 | module.exports = {
|
117 | context: __dirname,
|
118 | entry: "./index.js",
|
119 | module: {
|
120 | loaders: [
|
121 | {
|
122 | test: /\.js$/,
|
123 | loader: "transform-loader?brfs"
|
124 | }
|
125 | ]
|
126 | }
|
127 | }
|
128 | ```
|
129 |
|
130 | The loader is applied to all JS files, which can incur a performance hit with watch tasks. So you may want to use `transform-loader/cacheable?brfs` instead.
|
131 |
|
132 | <h2 align="center">Maintainers</h2>
|
133 |
|
134 | <table>
|
135 | <tbody>
|
136 | <tr>
|
137 | <td align="center">
|
138 | <img width="150" height="150"
|
139 | src="https://avatars3.githubusercontent.com/u/166921?v=3&s=150">
|
140 | </br>
|
141 | <a href="https://github.com/bebraw">Juho Vepsäläinen</a>
|
142 | </td>
|
143 | <td align="center">
|
144 | <img width="150" height="150"
|
145 | src="https://avatars2.githubusercontent.com/u/8420490?v=3&s=150">
|
146 | </br>
|
147 | <a href="https://github.com/d3viant0ne">Joshua Wiens</a>
|
148 | </td>
|
149 | <td align="center">
|
150 | <img width="150" height="150"
|
151 | src="https://avatars3.githubusercontent.com/u/533616?v=3&s=150">
|
152 | </br>
|
153 | <a href="https://github.com/SpaceK33z">Kees Kluskens</a>
|
154 | </td>
|
155 | <td align="center">
|
156 | <img width="150" height="150"
|
157 | src="https://avatars3.githubusercontent.com/u/3408176?v=3&s=150">
|
158 | </br>
|
159 | <a href="https://github.com/TheLarkInn">Sean Larkin</a>
|
160 | </td>
|
161 | </tr>
|
162 | <tbody>
|
163 | </table>
|
164 |
|
165 |
|
166 | [npm]: https://img.shields.io/npm/v/transform-loader.svg
|
167 | [npm-url]: https://npmjs.com/package/transform-loader
|
168 |
|
169 | [deps]: https://david-dm.org/webpack-contrib/transform-loader.svg
|
170 | [deps-url]: https://david-dm.org/webpack-contrib/transform-loader
|
171 |
|
172 | [chat]: https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg
|
173 | [chat-url]: https://gitter.im/webpack/webpack
|