ray-build
v2.1.2
Published
ray build for compile react&react-native
Downloads
13
Readme
ray-build
v1.0.11 及之前版本 -> gulp@3
v1.0.12 -> gulp@4
v2.0.0 之前版本,babel 采用的是 [email protected] 版本
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 模板文件
};
License
MIT
changelog
2021-4-16 v2.1.1
modify babelConfig
, default no babel-plugin-add-module-exports
plugins
2021-3-15 v2.1.0
change ray-gulp-toolkit
2021-3-10 v2.0.5
add modhtml
task
2020-10-26 v2.0.3
update babelConfig
2020-7-30 v2.0.1
update dependencies
2020-5-21 v2.0.0
update [email protected]
2020-5-9 v1.1.1
babel config add babel-plugin-transform-runtime