使用literalify库

牧夜

于 2015-03-15 13:00:06 发布

阅读量1.5k

点赞数

本文介绍了一个依赖browserify变换的库literalify，它能将require的写法替换成其他任意写法，例如将CommonJS风格的代码转换为调用模式。文章通过一个示例详细展示了如何安装和使用该库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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