ray-pack-toolkit
author
ilex.h
描述 descr
常用的 babelConfig、compile sass/less、other tools
Install
npm install -save ray-pack-toolkit
Usage
babelConfig
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
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
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
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
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
# test
node tests/prj.js
SplitImportPlugin
默认或转换成 libraryName + '/lib/' + 'modelName'
- options.libraryName:
Array<String> | String
- options.customName:
String | Function
, String 类型代表模块名 - options.customMapping:
Object
, 特殊类型的 mapping,与customName冲突
.babelrc
{
"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
的方式
// 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
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