使用literalify库(github地址点这里)
literalify是一个依赖browserify变换的库,能够将require的写法替换成其他任意写法。比如,你使用CommonJS模板写的代码,可以给转换成调用的模式
下面给出一个demo
安装
npm install literalify
或者
git clone https://github.com/pluma/literalify.git cd literalify npm install make test //window下就算了,其实也就是跑测试用例的
基本使用
example/vendor/some-dependency.js
window.$ = { makeAwesome: function(str) { return str.toUpperCase(); } };
example/app.js
var makeAwesome = require('some-dependency').makeAwesome; console.log(makeAwesome('needs more caps'));
example/index.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Look at the console!</title> </head> <body> <script src="vendor/some-dependency.js"></script> <script src="bundle.js"></script> </body> </html>
用法
var browserify = require('browserify'), literalify = require('literalify'), b = browserify(); b.transform(literalify.configure({ 'some-dependency': 'window.$' })); b.add('./app.js'); b.bundle().pipe(require('fs').createWriteStream('bundle.js'));
会发现,在上面的html文件中引入了一个bundle.js文件,但是我们下载的demo中其实是没有这个bundle.js文件的,这里可以将usage中的代码保存到一个js中,运行这个js即可。也可以直接在node环境中执行上述代码。
Package.json中配置
也可以在package.json中配置,这样修改变换规则时不涉及修改js代码。
package.json
{
"name": "my-awesome-project",
"devDependencies": {
"browserify": "*",
"literalify": "*"
},
"literalify": {"some-dependency": "window.$"}
}
API用法
var browserify = require('browserify'),
literalify = require('literalify'),
b = browserify();
b.transform(literalify);
b.add('./app.js');
b.bundle().pipe(require('fs').createWriteStream('bundle.js'));
shell用法
browserify -t literalify ./app.js > bundle.js
API
literalify.configure(rules):transform
创建一个browserify的转换,将require的调用转换成给定的表达式