tsdx tsx 的相关设置

[wisetc]

介绍

什么是 tsdx？—— 一个“零配置”的 typescript 库编译开发工具。

配置

为了增加 enzyme 和 scss，其实还是需要手动配置的。

enzyme

1. 安装依赖
2. 配置 setupFiles
3. 配置 jest.config

配置好自己的 registry 后，就可以用 yarn 来安装依赖了，否则安装速度可能会比较慢。

$ yarn add -D enzyme enzyme-adapter-react-16 @types/enzyme

创建文件 config/tests.js，内容如下：

// config/tests.js
/** Jest test setup file. */

const { configure } = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');

// Configure enzyme.
configure({ adapter: new Adapter() });

呃呵，手动创建一下 jest 的配置文件jest.config.js。

先手动装一下模拟css等资源文件的工具 identity-obj-proxy。

$ yarn add -D identity-obj-proxy

// jest.config.js
let path = require('path');

const config = {
  setupFiles: [path.resolve(path.join(__dirname, 'config', 'tests.js'))],
  moduleNameMapper: {
    '\\.(css|less|scss)$': 'identity-obj-proxy',
  },
};

module.exports = config;

scss

1. 安装依赖
2. 配置 rollup 用 tsdx.config

tsdx 内部用的编译工具是 rollup，使用 rollup-plugin-scss 可以编译scss。先安装依赖，

$ yarn add -D rollup-plugin-scss

然后配置 tsdx.config.js

const scss = require('rollup-plugin-scss');

module.exports = {
  rollup(config, options) {
    config.plugins = config.plugins.concat([
      scss(), // will output compiled styles to output.css
    ]);
    return config;
  },
};

全文完。