2.3.18 • Published 2 years ago

bluedot-antd v2.3.18

Weekly downloads
90
License
MIT
Repository
-
Last release
2 years ago

lean

dumi babel exapple (base father2)

babel 方式踩的坑

babel 方式是文件到文件的编译,不会做额外的处理

  • 不要在组件中使用 cssModules,否则,构建产物也会保持 cssModules 的引用方式(形如:import Styles from 'style/index.css
  • 需要生成 d.ts 文件,需要引入静态资源,看 PR临时方案
  • 如果需要 umd 产物,不要像 antd 那样 css 和 js 分离开发,因为 umd 使用的是 rollup 打包,分离开发下 css 没有依赖关系,不会被打包

Introduction

  • base antd
  • babel
  • build esm、cjs、umd
  • support import assets: css、image、...
  • supprot d.ts
  • support unitTest(@testing-library/react)

方案

support import assets && supprot d.ts

为了支持 babel 方式下,引入静态资源,并生成 d.ts 声明文件,提了 PR,但 father2 目前官方没时间处理,我这里进行了 hack 处理。

临时方案:https://github.com/umijs/father/issues/227,以下不用看了


增加 npm 命令 "hack": "node scripts/hack-depend.js",对 node_modules 下的依赖进行 hack 处理:

  • typings.d.ts 文件中声明非 js/ts 模块:
declare module '*.css';
declare module '*.less';
declare module '*.png';
declare module '*.jpg';
declare module '*.gif';
  • package.json 添加脚本命令:
"scripts" : {

  "postinstall": "node scripts/hack-depend.js"
}
  • scripts/hack-depend.js 脚本:
/**
 * 重写依赖模块(读取文件查找替换)
 */

const fs = require('fs');
const path = require('path');
const sep = path.posix.sep;

const hacks = [
  {
    // https://github.com/umijs/father/pull/220 ,官方没时间处理 PR,这里进行 hack 处理
    name: 'father-build',
    path: '../node_modules/father-build/lib/babel.js',
    hack: data => {
      // console.log(data)
      return data
        .replace(
          `
    function getTsconfigCompilerOptions(path) {
      const config = parseTsconfig(path);
      return config ? config.compilerOptions : undefined;
    }

    function getTSConfig() {
      const tsconfigPath = (0, _path.join)(cwd, 'tsconfig.json');
      const templateTsconfigPath = (0, _path.join)(__dirname, '../template/tsconfig.json');

      if ((0, _fs.existsSync)(tsconfigPath)) {
        return getTsconfigCompilerOptions(tsconfigPath) || {};
      }

      if (rootPath && (0, _fs.existsSync)((0, _path.join)(rootPath, 'tsconfig.json'))) {
        return getTsconfigCompilerOptions((0, _path.join)(rootPath, 'tsconfig.json')) || {};
      }

      return getTsconfigCompilerOptions(templateTsconfigPath) || {};
    }`,
          `
    function getTsconfigCompilerOptions(path) {
      const config = parseTsconfig(path);
      return config ? config.compilerOptions : undefined;
    }

    function getTsconfigInclude(path) {
      const config = parseTsconfig(path);
      const includesPath = config ? config.include || [] : [];
      return includesPath;
    }

    function getTSConfig() {
      const tsconfigPath = (0, _path.join)(cwd, 'tsconfig.json');
      const templateTsconfigPath = (0, _path.join)(__dirname, '../template/tsconfig.json');

      if ((0, _fs.existsSync)(tsconfigPath)) {
        return getTsconfigCompilerOptions(tsconfigPath) || {};
      }

      if (rootPath && (0, _fs.existsSync)((0, _path.join)(rootPath, 'tsconfig.json'))) {
        return getTsconfigCompilerOptions((0, _path.join)(rootPath, 'tsconfig.json')) || {};
      }

      return getTsconfigCompilerOptions(templateTsconfigPath) || {};
    }

    function getTSMatch() {
      const tsconfigPath = join(cwd, 'tsconfig.json');
      const templateTsconfigPath = join(__dirname, '../template/tsconfig.json');
      if (existsSync(tsconfigPath)) {
        return getTsconfigInclude(tsconfigPath) || [];
      }
      if (rootPath && existsSync(join(rootPath, 'tsconfig.json'))) {
        return getTsconfigInclude(join(rootPath, 'tsconfig.json')) || [];
      }
      return getTsconfigInclude(templateTsconfigPath) || [];
    }`,
        )
        .replace(
          `&& !path.endsWith('.d.ts');`,
          `&& (path.endsWith('typings.d.ts') || path.endsWith('index.d.ts') || !path.endsWith('.d.ts'));`,
        )
        .replace(
          `[(0, _path.join)(srcPath, '**/*'),`,
          `[(0, _path.join)(srcPath, '../typings.d.ts'),(0, _path.join)(srcPath, '../index.d.ts'),(0, _path.join)(srcPath, '../typings/index.d.ts'),(0, _path.join)(srcPath, '**/*'),`,
        );
    },
  },
];

const run = () => {
  for (const item of hacks) {
    const finalPath = path.resolve(__dirname, item.path.replace(/\//g, sep));
    fs.readFile(finalPath, 'utf8', (err, data) => {
      if (err) {
        throw err;
      }
      // console.log('=====data=====')
      // console.log(data.indexOf(`&& !path.endsWith('.d.ts');`))
      // console.log(typeof data)
      // console.log(String(data))
      // console.log('=====data=====')

      const fixed = item.hack(data);
      fixed &&
        fs.writeFile(finalPath, fixed, err => {
          if (err) {
            throw err;
          }
          console.log('hack success');
        });
    });
  }
};

run();

发包后,在 umi 项目中使用 lean 组件库

在 tsx 中使用

import React from 'react';
import { Foo, Button } from 'bluedot-antd';

export default () => {
  return (
    <div>
      <Foo title="demo" />
      <Button btnType="primary">primary</Button>
    </div>
  );
};

Getting Started

Install dependencies,

$ npm i

Hack dependencies,

$ npm run hack

Start the dev server,

$ npm start

Build documentation,

$ npm run docs:build

Build library via father-build,

$ npm run build

Test Components,

# test all components
$ npm run test
# test all components with coverage
$ npm run test:coverage
# test one component Foo
$ npx umi-test src/Foo/index.test.tsx

, "peerDependencies": { "antd": "^4.3.3" }

2.3.2

2 years ago

2.3.1

2 years ago

2.3.4

2 years ago

2.3.3

2 years ago

2.3.6

2 years ago

2.3.5

2 years ago

2.3.8

2 years ago

2.3.7

2 years ago

2.3.9

2 years ago

2.3.17

2 years ago

2.3.16

2 years ago

2.3.18

2 years ago

2.3.13

2 years ago

2.3.12

2 years ago

2.3.15

2 years ago

2.3.14

2 years ago

2.3.11

2 years ago

2.3.10

2 years ago

2.3.0

3 years ago

2.2.0

3 years ago

2.2.3

3 years ago

2.1.2

3 years ago

2.1.3

3 years ago

2.0.7

3 years ago

2.0.9

3 years ago

2.0.8

3 years ago

2.1.1

3 years ago

2.0.11

3 years ago

2.0.12

3 years ago

2.0.10

3 years ago

2.1.0

3 years ago

2.0.3

3 years ago

2.0.2

3 years ago

2.0.5

3 years ago

2.0.4

3 years ago

2.0.6

3 years ago

2.0.1

3 years ago

2.0.0

3 years ago

1.1.3

3 years ago

1.1.1

3 years ago

1.1.0

3 years ago

1.1.2

3 years ago

1.0.87

3 years ago

1.0.86

3 years ago

1.0.84

3 years ago

1.0.83

3 years ago

1.0.85

3 years ago

1.0.82

4 years ago

1.0.81

4 years ago

1.0.79

4 years ago

1.0.78

4 years ago

1.0.80

4 years ago

1.0.73

4 years ago

1.0.72

4 years ago

1.0.77

4 years ago

1.0.76

4 years ago

1.0.75

4 years ago

1.0.74

4 years ago

1.0.69

4 years ago

1.0.71

4 years ago

1.0.70

4 years ago

1.0.68

4 years ago

1.0.67

4 years ago

1.0.66

4 years ago

1.0.62

4 years ago

1.0.61

4 years ago

1.0.60

4 years ago

1.0.65

4 years ago

1.0.64

4 years ago

1.0.63

4 years ago

1.0.59

4 years ago

1.0.58

4 years ago

1.0.57

4 years ago

1.0.56

4 years ago

1.0.55

4 years ago

1.0.54

4 years ago

1.0.53

4 years ago

1.0.52

4 years ago

1.0.51

4 years ago

1.0.50

4 years ago

1.0.49

4 years ago

1.0.48

5 years ago

1.0.47

5 years ago

1.0.46

5 years ago

1.0.45

5 years ago

1.0.44

5 years ago

1.0.43

5 years ago

1.0.42

5 years ago

1.0.39

5 years ago

1.0.38

5 years ago

1.0.40

5 years ago

1.0.41

5 years ago

1.0.37

5 years ago

1.0.36

5 years ago

1.0.35

5 years ago

1.0.34

5 years ago

1.0.33

5 years ago

1.0.32

5 years ago

1.0.31

5 years ago

1.0.30

5 years ago

1.0.29

5 years ago

1.0.28

5 years ago

1.0.27

5 years ago

1.0.26

5 years ago

1.0.25

5 years ago

1.0.24

5 years ago

1.0.23

5 years ago

1.0.22

5 years ago

1.0.21

5 years ago

1.0.20

5 years ago

1.0.19

5 years ago

1.0.18

5 years ago

1.0.17

5 years ago

1.0.16

5 years ago

1.0.14

5 years ago

1.0.13

5 years ago

1.0.12

5 years ago

1.0.11

5 years ago

1.0.10

5 years ago

1.0.9

5 years ago

1.0.8

5 years ago

1.0.7

5 years ago

1.0.6

5 years ago

1.0.2

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago