atom-web-compiler
atom-web-compiler
支持 Atom
的服务端渲染
安装
npm install atom-web-compiler --registry http://registry.npm.baidu-int.com
项目文件说明
index.js
: 编译工具,输入.atom.html
文件内容,输出编译后的js/php/css等信息
API
首先,需要引入 atom-web-compiler
const compiler = require('atom-web-compiler');
compiler.compile(options)
输入一个 .atom
文件的内容, 返回一个包含编译后各个信息的对象,对象形式如下:
{
blocks: Object, // 各个block中的源代码
compiled: {
js: String, // 编译后的js代码
css: String, // 编译后的css代码
php: String // 编译后的php代码
},
paths: {
js: Object, // 编译后js中引用的各个组件的路径
php: Object // 编译后php中引用的各个组件的路径
},
props: Array // 当前atom组件定义props
}
options
- options.content:
.atom
文件的内容,必选 - options.mode: 编译后的js代码的形式,可选,取值包括
amd/commonjs/umd/global
,默认值amd
- options.compileJSComponent: 处理js组件路径的插件函数,可选,插件函数可以获取到两个参数,分别是组件的原始路径
path
和组件的key
。插件函数应返回相应的js代码(如require("path/to/component")
)。 - options.compilePHPComponent: 处理php组件路径的插件函数,可选,插件函数可以获取到两个参数,分别是组件的原始路径
path
和组件的key
。插件函数返回相应的php代码(如"path/to/component"
)。 - options.compileStyle: 暴露预处理 css 代码的接口,可选。插件函数可以获取到两个参数,分别是代码内容
code
和所在的 style 标签的参数attrs
(目前只有attrs.lang
,表示用户设置的预处理语言),该函数只支持同步的方式,返回处理后的 css 代码。 - options.strip {boolean} 是否strip掉空白字符(类似smarty的{strip}{/strip}),默认为false
- options.versionIsolated {boolean} 是否使用php的版本隔离,默认是 true
- options.silent {boolean} 是否静默 false
- options.color {boolean} 日志是否带颜色 true
- options.logger {Function|Object} 日志回调函数
compiler.getRender(template)
输入一个template
字符串,返回一个用module.exports
包裹,包含render
函数和staticRenderFns
的字符串
template
atom模板字符串
atom服务端渲染原理
使用限制
由于不同语言的限制,我们在使用进行服务端渲染时也有一些限制:
.atom
文件中,组件的data
、props
和components
属性必须单独放到<config>
中template
中模板使用js表达式时,不能调用函数,不能使用计算属性
一个.atom
文件示例
<template>
<div class="c-container">
<div>{{a}}</div>
<div><p>123</p></div>
<div v-if="b">i am b</div>
<ala />
</div>
</template>
<style>
.c-container {
color: red;
}
</style>
<script>
var sth = require('something');
module.exports = {
created: function () {
sth();
}
};
</script>
<config>
{
props: ['x', 'y'],
data: {
a: 123,
b: true
},
components: {
ala: 'path/to/ala'
}
};
</config>
License
Dependencies
@babel/code-frame: ^7.0.0@babel/core: ^7.4.3@babel/plugin-proposal-class-properties: ^7.4.0@babel/plugin-proposal-object-rest-spread: ^7.4.4@babel/preset-env: ^7.4.3@babel/preset-typescript: ^7.3.3chalk: ^2.1.0consolidate: ^0.15.1crypto: ^1.0.1de-indent: ^1.0.2decomment: ^0.9.0fs-extra: ^4.0.0hash-sum: ^1.0.2he: ^1.1.0is-relative: ^1.0.0less: ^3.10.3loader-utils: ^1.1.0lodash: ^4.17.11postcss: ^6.0.21postcss-icss-composes: ^2.0.3postcss-icss-keyframes: ^0.2.1postcss-icss-selectors: ^2.0.3postcss-selector-parser: ^2.2.3source-map: ^0.5.0ts-morph: ^3.1.3ts2php: ^0.24.0typescript: ~3.8.3vue-template-es2015-compiler: ^1.6.0