https://github.com/ystarlongzi/fis3-hook-raw-loader
A raw loader plugin for fis3.
https://github.com/ystarlongzi/fis3-hook-raw-loader
fis3 raw-loader
Last synced: 3 months ago
JSON representation
A raw loader plugin for fis3.
- Host: GitHub
- URL: https://github.com/ystarlongzi/fis3-hook-raw-loader
- Owner: ystarlongzi
- Created: 2017-04-20T12:57:32.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-04-24T13:09:48.000Z (about 8 years ago)
- Last Synced: 2023-08-24T02:22:12.459Z (almost 2 years ago)
- Topics: fis3, raw-loader
- Language: JavaScript
- Size: 3.91 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
fis3-hook-raw-loader
====================
一款基于 fis3 的 raw loader，允许在类 js 文件中嵌入其它文件的内容。
### 安装
```
npm install fis3-hook-raw-loader
```
### 配置
```
fis.hook('raw-loader');
```
### 用法
```
-- page
-- item.less
-- item.es6
-- item.png
-- list.es6
```
假设存在如上目录结构，其中 `item.less` 内容如下：
```less
.title {
font-size: 16px;
strong {
color: red;
}
}
```
`item.es6` 内容如下：
```javascript6
const word = 'Hello world!';
```
然后，我们在 `list.es6` 中可以使用以下两种方法嵌入文件内容：
- 使用 `import` 或 `require` 关键字。（其中 `!raw!` 表示的是获取文件最初的、未做任何处理的内容）
```
// list.es6
import js from 'raw!./item';
import css from '!raw!./item.less';
const img = require('raw!./item.png');
```
- 使用 `__fis__raw()` 方法。（`!!` 和 `!raw!` 表示相同的含义）
```
// list.es6
const js = __fis__raw('!./item');
const css = __fis__raw('!!./item.lss');
const img = __fis__raw('!./item.png');
```
上面两种方式编译后的内容大致如下：
```
// list.es6
var js = "var word = 'Hello world!';";
var css = ".title {\n font-size: 16px;\n\n strong {\n color: red;\n }\n}";
var img = "data:image/png;base64,iVBORw0K......AAAElFTkSuQmCC";
```