---
title: 安装和使用
---
LiquidJS 是一个简单的、安全的、兼容 Shopify 的、纯 JavaScript 编写的模板引擎。这个项目的目的是为 JavaScript 社区提供一个 Liquid 模板引擎的实现。
## 在 Node.js 里使用
通过 NPM 安装：
```bash
npm install --save liquidjs
```
```javascript
var { Liquid } = require('liquidjs');
var engine = new Liquid();
engine
.parseAndRender('{{name | capitalize}}', {name: 'alice'})
.then(console.log); // 输出 'Alice'
```
{% note info 示例 %} 这里有一个 LiquidJS 在 Node.js 里使用的例子：liquidjs/demo/nodejs/.{% endnote %}
LiquidJS 的类型定义也导出并发布到了 NPM 包里，写 TypeScript 的项目可以直接这样使用：
```typescript
import { Liquid } from 'liquidjs';
const engine = new Liquid();
engine
.parseAndRender('{{name | capitalize}}', {name: 'alice'})
.then(console.log); // 输出 'Alice'
```
{% note info 示例 %} 这里有一个 LiquidJS 在 TypeScript 下的例子：liquidjs/demo/typescript/.{% endnote %}
## 在浏览器里使用
LiquidJS 预先构建了 UMD Bundle，可以通过 jsDelivr CDN 来引用：
```html
```
{% note info 示例 %} 这里有一个 jsFiddle 上的在线例子：jsfiddle.net/x43eb0z6，其源码也可以在 liquidjs/demo/browser/ 找到。{% endnote %}
{% note warn 兼容性 %} 在类似 IE 和 Android UC 这样的浏览器中，你可能需要引入 Promise polyfill，参看 caniuse 的统计。 {% endnote %}
## 在命令行里使用
你还可以在命令行里使用 LiquidJS：
```bash
echo '{{"hello" | capitalize}}' | npx liquidjs
```
模板来自标准输入，数据则来自参数，这个参数可以是一个 JSON 文件的路径，也可以是一个 JSON 字符串：
```bash
echo 'Hello, {{ name }}.' | npx liquidjs '{"name": "Snake"}'
```
## 其他
[@stevenanthonyrevo](https://github.com/stevenanthonyrevo) 还提供了一个 ReactJS demo，请参考 [liquidjs/demo/reactjs/](https://github.com/harttle/liquidjs/blob/master/demo/reactjs/)。