Ray-build NPM | npm.io

ray-build

v1.0.11 及之前版本 -> gulp@3

v1.0.12 -> gulp@4

v2.0.0 之前版本，babel 采用的是 babel@6.x 版本

v2.0.0 -> babel@7

author

ilex.h

descr

特性

安装

npm i ray-build --save--dev

使用

ray-build [options]

命令行参数

$ ray-build -h

  Usage: ray-build [options]

  Options:

    -h, --help                output usage information
    -v, --version             output the version number

支持的task

$ ray-build react
 > build react components

$ ray-build scss
  > build scss

$ ray-build less
  > build less

$ ray-build stylescss
  > build stylescss， 将 style或styles下的scss 文件，打包至 lib下，如果存在 `/style[s]/index.scss`，则编译为 `/style[s]/index.css`

$ ray-build styleless
  > build styleless，将 style或styles下的less 文件，打包至 lib下，如果存在 `/style[s]/index.less`，则编译为 `/style[s]/index.css`

$ ray-build pluginEntry
  > build pluginEntry

$ ray-build plugin
  > build plugin =>

    index.js -> index.plugin.js
    customRoutes.js -> customRoutes.plugin.js
    extraEntry.js -> extraEntry.plugin.js
    reducer.js -> reducer.plugin.js
    src -> lib

$ ray-build example
  > build example 将 example 目录下的文件，打包至 docsite。 支持 `js/jsx、assets、md/mdx、css/scss`

$ ray-build modhtml
  > 项目开启 umd 模式打包，自动将 split 脚本加入到指定html模板中，如: 将 html 中的 `@mod@` 替换为 scripts 脚本

svgtoolkit

1.0.14 之后支持

use dir

svgtoolkit mysvg

use files

svgtoolkit mysvg/a.svg mysvg/b.svg

输出结果比较：

a.svg

<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 480"
aria-label="svg area demo"
>
  <path id="p1" name="path 1" fill="#FF0000" d="M499,72 L606,84 L531,186 L458,136 L499,72 z" ></path>
</svg>

a.js

export default {
  label: 'svg area demo',
  viewBox: '0 0 640 480',
  children: [
    { name: 'path 1', id: 'p1', path: 'M499,72 L606,84 L531,186 L458,136 L499,72 z' }
  ]
};

since 1.0.17 之后，新增解析 groups、texts

该版本之后，将新增节点 groups、texts。同时将 'line', 'polyline', 'polygon', 'rect', 'circle', 'ellipse' 转化为 path

结果:

export default {
  label: 'svg area demo',
  viewBox: '0 0 640 480',
  children: [
    { name: 'path 1', id: 'p1', path: 'M499,72 L606,84 L531,186 L458,136 L499,72 z' }
  ],
  groups: [], // group 仅支持 g 节点嵌套一层
  texts: []
};

数据中，如果没有设置 id 字段，则自动会填充 key 字段。在react 应用中，可以合理使用 id 和 key

raybuild mod html 文档

支持项目根目录添加 .mod.config.js 用于快速设置配置信息

// 引入 scripts 映射对象，由打包工具自动生成
const scripts = require('./external/studio/scripts.json');

/**
scripts 数据格式

scripts: {
  head: {
    urls: ['', '']
  },
  body: {
    urls: ['', '']
  }
}
*/

module.exports = {
  baseUrl: '/external/studio/', // 默认为 ''
  scriptUrl: 'scripts.json',
  scripts: scripts, // 获取 scripts 脚本对象
  useBody: true,
  replaceFrom: '@mod@', // src 模板文件中占位字符串，用于替换 脚本
  replaceTo: '',
  src: ['./tpl.html'],
  dest: './', // 目标文件生成位置
  // dest: 'dist/',
  filename: 'tpl-mod.html' // 生成的 mod html 模板文件，该文件可以用 webpack 打包中的 html 模板文件
};