使用literalify库

使用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的调用转换成给定的表达式

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值