class ts 扩展方法_构建UI库(ts+react)：三、按需加载

要解决上篇提到的问题，我们需要了解下我们引入其他库的实际引用的内容。

拿antd来说，官方给出的引入组件的写法是：

import Button from 'antd/lib/button';
import 'antd/lib/button/style'; // 或者 antd/lib/button/style/css 加载 css 文件

如果你使用了babel-plugin-import之后，你也可以使用如下写法：

import {Button} from 'antd'

而babel-plugin-import正是把下方代码转换成上方代码。

我们可以看一下antd/lib/button引入的到底是什么代码。

我们在'node_modules/antd/lib/button/index.js'中看到如下代码

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _button = _interopRequireDefault(require("./button"));

var _buttonGroup = _interopRequireDefault(require("./button-group"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

_button["default"].Group = _buttonGroup["default"];
var _default = _button["default"];
exports["default"] = _default;

可以看到这是经过babel转义的代码。引入了button和button-group两个模块。

所以我们的button组件也需要转换成这样的方式。

我们在package.json里写一个转换的脚本

"build:lib": "rimraf lib && babel components --out-dir lib --extensions ".ts,.tsx"",

这个脚本可以清空Lib目录，并转换components目录下扩展名为ts,.tsx至lib目录。

babel转移ts语法需要设置preset,我们看下最新的preset

{
  "presets": [
    "@babel/env",
    "@babel/typescript",
    "@babel/react"
  ],
  "plugins": [
    ["import", {
      "libraryName": "expui",
      "libraryDirectory": "components",
      "style": true,   // or 'css'
    }
    ],
    "@babel/proposal-class-properties",
    "@babel/proposal-object-rest-spread",
   
  ]
}

看到preset里多了@babel/typescript，并且多了@babel/proposal-class-properties和@babel/proposal-object-rest-spread。这是babel对于typescript的支持。我们选择让babel来处理typescript脚本而不是让typescript自己转换成javascript语法。

plugins的第一个插件我们可能很熟悉，这就是babel-plugin-import的使用方式，后续我们讲使用的时候还会提到。

设置好typescript的代码转换之后我们还需要独立的转换less代码。我们需要批量的转换less代码至css代码，可能还需要处理浏览器兼容性。这让我想到了使用gulp工具流。

我们再设置一个脚本：

"build:css": "rimraf lib/**/style && cd scripts/gulp && gulp"

gulp文件：

const path = require('path');
const gulp = require('gulp');
const less = require('gulp-less');
const LessAutoprefix = require('less-plugin-autoprefix');
const autoprefix = new LessAutoprefix({ browsers: ['last 2 versions'] });


gulp.task('less', function(){
  let lessPath = path.resolve(__dirname, '../../components/**/**.less');
  console.log('lessPath',lessPath);
  return gulp.src(lessPath)
    .pipe(less({
      plugins: [autoprefix]
    }))
    .pipe(gulp.dest(path.resolve(__dirname, '../../lib')));
})

gulp.task('default', gulp.series(['less']));

这个gulp脚本可以帮我们执行任务：将components文件下的less文件转换到lib目录下，并做autoprefix兼容性支持。

转换完的lib目录如下：

那么，我们自己启动服务时调试组件该如何操作呢，我们引入的也是components下的组件，我们需要将

import的文件路径指向components而不是node_modules。

我们在webpack的alias添加配置：

alias:{
      'expui': process.cwd(),
      '@': path.resolve(__dirname, '../../'),
      '@site': path.resolve(__dirname, '../../site')
    }

也就是将expui指向本地开发目录，再配合import-babel-pluigin中这么一段：

["import", {
      "libraryName": "expui",
      "libraryDirectory": "components",
      "style": true,   // or 'css'
    }
    ],

便可以指向开发组件目录。

至此整个基本打包配置和开发配置就告一段落了。后面要更新几个示例组件。

项目传送门：

https://github.com/wurenjie1125/exp-ui​github.com