Ray-pack-toolkit NPM

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" }
        ]
      }
    ]
  ]
}