# ray-pack-toolkit > compile toolkit Latest version **1.4.1** (published 2025-12-29) · MIT license · 0 weekly downloads ## Install ```sh npm install ray-pack-toolkit pnpm add ray-pack-toolkit yarn add ray-pack-toolkit bun add ray-pack-toolkit ``` ## Health **Score 45/100 (D)** — status: stable. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. ## Facts | | | |---|---| | Version | 1.4.1 | | Published | 2025-12-29 | | First published | 2019-01-16 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 39 | | Unpacked size | 34.8 KB | | Known vulnerabilities | 0 (+5 in 1 direct dependencies) | | Install scripts | no | | Author | ilex.h | | Maintainers | ilex.h | ## Links - npm: https://www.npmjs.com/package/ray-pack-toolkit - npm.io page: https://npm.io/package/ray-pack-toolkit ## Dependencies (39) - [less](https://npm.io/package/less.md) ^3.13.1 - [sass](https://npm.io/package/sass.md) ~1.32.13 - [chalk](https://npm.io/package/chalk.md) ^2.4.2 - [rimraf](https://npm.io/package/rimraf.md) ^3.0.2 - [postcss](https://npm.io/package/postcss.md) ^7.0.39 - [colorful](https://npm.io/package/colorful.md) ^2.1.0 - [fs-extra](https://npm.io/package/fs-extra.md) ^3.0.1 - [commander](https://npm.io/package/commander.md) ^5.0.0 - [babel-core](https://npm.io/package/babel-core.md) ^7.0.0-0 - [@babel/core](https://npm.io/package/@babel/core.md) ^7.4.5 - [less-loader](https://npm.io/package/less-loader.md) ^4.1.0 - [sass-loader](https://npm.io/package/sass-loader.md) ~10.1.1 - [autoprefixer](https://npm.io/package/autoprefixer.md) ^9.8.8 - [babel-loader](https://npm.io/package/babel-loader.md) ^8.0.6 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.13.10 - [postcss-import](https://npm.io/package/postcss-import.md) ^12.0.1 - [postcss-loader](https://npm.io/package/postcss-loader.md) ^3.0.0 - [postcss-nested](https://npm.io/package/postcss-nested.md) ^4.2.3 - [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.2.5 - [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.4.5 - [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.0.0 - [less-plugin-npm-import](https://npm.io/package/less-plugin-npm-import.md) ^2.1.0 - [node-sass-package-importer](https://npm.io/package/node-sass-package-importer.md) ^5.3.2 - [@babel/plugin-transform-spread](https://npm.io/package/@babel/plugin-transform-spread.md) ^7.2.2 - [@babel/plugin-transform-runtime](https://npm.io/package/@babel/plugin-transform-runtime.md) ^7.4.4 - [babel-plugin-add-module-exports](https://npm.io/package/babel-plugin-add-module-exports.md) ^1.0.4 - [@babel/plugin-proposal-decorators](https://npm.io/package/@babel/plugin-proposal-decorators.md) ^7.4.4 - [@babel/plugin-syntax-dynamic-import](https://npm.io/package/@babel/plugin-syntax-dynamic-import.md) ^7.8.3 - [babel-plugin-inline-import-data-uri](https://npm.io/package/babel-plugin-inline-import-data-uri.md) ^1.0.1 - [@babel/plugin-transform-object-assign](https://npm.io/package/@babel/plugin-transform-object-assign.md) ^7.2.0 - [@babel/plugin-proposal-class-properties](https://npm.io/package/@babel/plugin-proposal-class-properties.md) ^7.4.4 - [babel-plugin-transform-async-to-promises](https://npm.io/package/babel-plugin-transform-async-to-promises.md) ^0.8.15 - [@babel/plugin-proposal-object-rest-spread](https://npm.io/package/@babel/plugin-proposal-object-rest-spread.md) ^7.4.4 - [@babel/plugin-transform-property-literals](https://npm.io/package/@babel/plugin-transform-property-literals.md) ^7.2.0 - [@babel/plugin-transform-template-literals](https://npm.io/package/@babel/plugin-transform-template-literals.md) ^7.4.4 - [@babel/plugin-proposal-export-default-from](https://npm.io/package/@babel/plugin-proposal-export-default-from.md) ^7.2.0 - [@babel/plugin-transform-react-display-name](https://npm.io/package/@babel/plugin-transform-react-display-name.md) ^7.10.1 - [@babel/plugin-proposal-export-namespace-from](https://npm.io/package/@babel/plugin-proposal-export-namespace-from.md) ^7.2.0 - [@babel/plugin-transform-member-expression-literals](https://npm.io/package/@babel/plugin-transform-member-expression-literals.md) ^7.2.0 ## Recent versions - 1.4.1 (latest) — 2025-12-29 - 1.4.0 — 2025-10-21 - 1.3.4 — 2025-09-29 - 1.3.3 — 2023-06-02 - 1.3.2 — 2021-12-08 - 1.3.1 — 2021-12-08 - 1.3.0 — 2021-12-01 - 1.2.4 — 2021-07-01 - 1.2.3 — 2021-06-29 - 1.2.2 — 2021-05-13 - 1.2.1 — 2021-04-27 - 1.2.0 — 2021-04-16 - 1.1.4 — 2021-04-09 - 1.1.3 — 2021-03-19 - 1.1.2 — 2021-03-16 - … 13 more at https://npm.io/package/ray-pack-toolkit/versions ## README # ray-pack-toolkit ## author ilex.h ## 描述 descr 常用的 babelConfig、compile sass/less、other tools ## Install ```bash npm install -save ray-pack-toolkit ``` ## Usage ### babelConfig ```js import getBabelConfig from 'ray-pack-toolkit/lib/babelConfig'; import { resolve } from 'ray-pack-toolkit/lib/prjHelper'; // webpack const webpackConfig = { module: { rules: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: resolve('babel-loader'), options: getBabelConfig(), } ] } }; // gulp const gulp = require('gulp'); const babel = require('gulp-babel'); const compileJs = () => { const babelConfig = getBabelConfig(); delete babelConfig.cacheDirectory; gulp.src(['src/**/*.js']).pipe(babel(babelConfig)).pipe(gulp.dest('lib')) } ``` ### compileLess ```js import gulp from 'gulp'; import through2 from 'through2'; import compileLess from 'ray-pack-toolkit/lib/compileLess'; // gulp const less = () => { return gulp .src(['src/**/*.less']) .pipe( through2.obj(function(file, encoding, next) { this.push(file.clone()); if (file.path.match(/(\/|\\)styles?(\/|\\)index\.less$/)) { compileLess(file.path) .then(css => { file.contents = Buffer.from(css); file.path = file.path.replace(/\.less$/, '.css'); this.push(file); next(); }) .catch(e => { console.error(e); }); } else { next(); } }) ) .pipe(gulp.dest('lib')); }; ``` ### compileScss ```js import gulp from 'gulp'; import through2 from 'through2'; import compileScss from 'ray-pack-toolkit/lib/compileScss'; // gulp const scss = () => { return gulp .src(['src/**/*.scss', 'src/**/*.sass']) .pipe( through2.obj(function(file, encoding, next) { this.push(file.clone()); if (file.path.match(/(\/|\\)styles?(\/|\\)index\.(scss|sass)$/)) { compileScss(file.path) .then(css => { file.contents = Buffer.from(css); file.path = file.path.replace(/\.(scss|sass)$/, '.css'); this.push(file); next(); }) .catch(e => { console.error(e); }); } else { next(); } }) ) .pipe(gulp.dest('lib')); }; ``` ### postCssConfig ```js import postCssConfig from 'ray-pack-toolkit/lib/postCssConfig'; import { resolve } from 'ray-pack-toolkit/lib/prjHelper'; // webpack const webpackConfig = { module: { rules: [ { test: /\.css$/, use: [ { loader: 'css-loader', options: { sourceMap: true, }, }, { loader: 'postcss-loader', options: Object.assign({}, { plugins: postcssConfig() }, { sourceMap: true }), }, ], } ] } }; ``` ### prjhelper ```js import { getPrjPath, resolveCwd, resolve, delFile, envBrowsers } from 'ray-pack-toolkit/lib/prjHelper'; getPrjPath('src', 'assets'); // D:/.../src/assets resolveCwd('src'); // D:/.../src resolveCwd('src', 'assets'); // D:/.../src/assets resolveCwd('src/assets'); // D:/.../src/assets resolve('@babel/core'); // require.resolve('@babel/core') delFile('lib'); // del D:/.../lib delFile('lib', 'images'); // del D:/.../lib/images delFile('lib/images'); // del D:/.../lib/images ``` test delFile ```bash # test node tests/prj.js ``` ## SplitImportPlugin 默认或转换成 `libraryName + '/lib/' + 'modelName'` * options.libraryName: `Array | String` * options.customName: `String | Function`， String 类型代表模块名 * options.customMapping: `Object`， 特殊类型的 mapping，与customName冲突 .babelrc ```js { "presets": [ [ "@babel/env", { "targets": { "edge": "17", "firefox": "60", "chrome": "67", "safari": "11.1" }, "useBuiltIns": "usage", "corejs": "3.6.4", } ] ], "plugins":[ ["ray-pack-toolkit/lib/babel/SplitImportPlugin", { "libraryName": ["my-module", "you-module"], "customName": "./custom" } ] ] } // custom.js module.exports = function(libraryName, modName) { if (modName === 'Row' || modName === 'Col') { return `${libraryName}/lib/grid/${modName}`; } // 默认转换方式 return `${libraryName}/lib/${modName[0].toLowerCase()}${modName.substr(1)}`; }; ``` 自定义创建plugin，使用 `moduleMapping` 的方式 ```js // myPlugin.js import getSplitImportPlugin from 'ray-pack-toolkit/lib/babel/getSplitImportPlugin'; const myPlugin = getSplitImportPlugin({ 'my-module': { Button: 'my-module/lib/button', ... }, 'you-module': { Button: 'you-module/lib/button', ... }, }); // .babelrc { ... "plugins":[ ["./myPlugin", { "libraryName": ["my-module", "you-module"] }] ] } ``` ## RepaceImportPlugin 改变 import 路径，如，部分场景下，开发模式下，需要将引入路径改为 `src` ```js import RepaceImportPlugin from 'ray-pack-toolkit/lib/babel/RepaceImportPlugin'; // or // .babelrc { ... "plugins":[ ["ray-pack-toolkit/lib/babel/RepaceImportPlugin", { "pkgs": ["my-module", "you-module"], "rules": [ { "src": "@amos/utils/DomTools", "dest": "amos-xxx/src/utils/DomTools" } ] } ] ] } ``` ## Lecense MIT ## changelog ### 2021-12-1 v1.3.0 update dependencies ### 2021-04-16 v1.2.0 modify `babelConfig` params ### 2021-03-16 v1.1.2 add `babel-plugin-transform-async-to-promises` ### 2020-10-26 v1.1.0 add `ReactDisplayNamePlugin` ### 2020-8-28 v1.0.10 modify `raypackLess` code `res.result` to `res.css` ### 2020-7-30 v1.0.9 del `shelljs`, add `rimraf` ### 2020-7-30 v1.0.8 update shelljs@0.8.4 ### 2020-7-21 v1.0.7 update dependencies ### 2020-5-21 v1.0.3 添加 `commonjs` 模式下，添加 `babel-plugin-add-module-exports` --- _Source: https://npm.io/package/ray-pack-toolkit · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._