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

MIT