Ts-plugin-legions NPM

ts-plugin-legions

基于 typescript 编译时运行插件库, Compatible with ts-loader(^2.2.0) and awesome-typescript-loader(^3.1.3)

Install

npm i ts-plugin-legions -D

Usage

createTransformer

主要用于查找指定 import modulesSpecifier,及修饰器 bindings,抓取文件相对路径，挂载在对象上，如生成唯一组件 UID，可以根据组件文件路径来保证唯一

import { createTransformer } from 'ts-plugin-legions';
import { StoreModules } from 'legions/store';

@StoreModules
export default class UserStore {}
var config = {
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: {
          transpileOnly: true,
          compilerOptions: {
            module: 'es2015',
          },
          getCustomTransformers: () => ({
            before: [
              // transform Store/ViewModel of mmlpx by default
              createTransformer(),
              // manual config mobx action
              createTransformer([
                {
                  libraryName: 'legions/store',
                  bindings: ['StoreModules'],
                },
              ]),
            ],
          }),
        },
      },
    ],
  },
};

createTransformerReactJsxProps

在 ts 编译运行阶段抓取指定组件，并往组件上挂载指定 props 参数,如果有指定值则用指定，没有指定则以文件路径作为结果

import { createTransformerReactJsxProps } from 'ts-plugin-legions';
var config = {
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: {
          transpileOnly: true,
          compilerOptions: {
            module: 'es2015',
          },
          getCustomTransformers: () => ({
            before: [
              // transform Store/ViewModel of mmlpx by default
              createTransformerReactJsxProps({
                components: [
                  {
                    name: 'HLTable',
                    props: 'uniqueUid',
                    value: '',
                  },
                  {
                    name: 'HLFormContainer',
                    props: 'uniqueUid',
                  },
                  {
                    name: 'QueryConditions',
                    props: 'uniqueUid',
                  },
                  {
                    name: 'HLTableForm',
                    props: 'uniqueUid',
                  },
                ],
              }),
            ],
          }),
        },
      },
    ],
  },
};

createTransformerMapImportModulesSpecifier

在 ts 运行时编译替换指定的 import mudlues Specifier 名称

import { createTransformerMapImportModulesSpecifier } from 'ts-plugin-legions';
import { schedule } from '../schedule';
import { warning } from '../warning';
var config = {
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: {
          transpileOnly: true,
          compilerOptions: {
            module: 'es2015',
          },
          getCustomTransformers: () => ({
            before: [
              // transform Store/ViewModel of mmlpx by default
              createTransformerMapImportModulesSpecifier([
                {
                  libraryName: '../schedule',
                  mapLibraryName: 'legions-lunar/schedule',
                },
                {
                  libraryName: '../warning',
                  mapLibraryName: 'legions-lunar/warning',
                },
              ]),
            ],
          }),
        },
      },
    ],
  },
};
// output
import { schedule } from 'legions-lunar/schedule';
import { warning } from 'legions-lunar/warning';