【typescript】tsdx入门

前言

• 最近浏览别人库时发现别人使用tsdx打包typescript，这个库确实挺有优势的，解决了ts打包成库的一些配置设置问题。
• 另外，还非常方便的整合了example和watch，文档，三位一体，相当方便。
• 今天来玩玩这个包。

官网

• https://www.npmjs.com/package/tsdx
• https://tsdx.io/#quick-start

安装

• 首先创建项目，使用：

npx tsdx create mylib

• 然后有3个选项，basic，react，react-with-storybook。
• 由于一般用这玩意都需要演示，所以本篇选择第三个。

::::::::::: ::::::::  :::::::::  :::    :::
    :+:    :+:    :+: :+:    :+: :+:    :+:
    +:+    +:+        +:+    +:+  +:+  +:+
    +#+    +#++:++#++ +#+    +:+   +#++:+
    +#+           +#+ +#+    +#+  +#+  +#+
    #+#    #+#    #+# #+#    #+# #+#    #+#
    ###     ########  #########  ###    ###

√ Choose a template · react-with-storybook
√ Created mylib
√ Installed dependencies

  Awesome! You're now ready to start coding.

  I already ran yarn install for you, so your next steps are:
    cd mylib

  To start developing (rebuilds on changes):
    yarn start

  To build for production:
    yarn build

  To test your library with Jest:
    yarn test

  Questions? Feedback? Please let me know!
  https://github.com/formium/tsdx/issues

打包配置

• 正常情况，如果你写库的话，它是生成一个文件导出，如果你的代码里有骚操作，或者有多个文件，那么你需要修改其默认的rollup配置的output：
• rollup文档
• 新建tsdx.config.js

module.exports = {
  // This function will run for each entry/format/env combination
  rollup(config, options) {
    console.log(config, options);
    return config; // always return a config.
  },
};

• 正常情况，你的样式是和js是分离的，如果你想每个js里都有css或者less,scss,sass，那么也是需要修改配置：

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

module.exports = {
  rollup(config, options) {
    config.plugins.push(
      postcss({
        inject: false,
        extract: !!options.writeMeta,
        extensions: [".less", ".css"]
      }),
    );
    return config;
  },
};

example BUG

• example文件夹是用parcel进行构建，先进行安装，如果npm run start可以成功启动则忽略此段。
• 如果失败，提示：Invalid Version: undefined 由at new SemVer此处报错，则需要修改package.json配置：

 "scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html",
    "preinstall": "npx npm-force-resolutions"
  },

• 在script中增加preinstall，这样在npm i的时候，会强制执行。
• 加入resolution:

 "resolutions": {
    "@babel/preset-env": "7.13.8"
  }

• 这样再重新进行安装启动，则可以解决此问题。

stories

• 由于选了第三个选项，所以自带了storybook，storybook更新挺快啊，上次文章讲的是5，现在已经6.2了。
• 可以看见有个文件夹是.storybook，这个就是其配置文件，在main.js下的addons中如果有@storybook/addon-essentials插件的，说明已经是6了，因为5是没有这个插件的。essential插件是老版的knobs（现在更名为control），docs插件，actions插件，viewport插件，background的插件的集合。确实也都是相当实用的插件。
• 由于以前写过了csf和mdx的写法，这里大同小异，就不写了。

Size-limit

• tsdx使用了size-limit去分析和压缩库
• size-limit 地址
• 使用npm run size执行size-limit
• 使用npm run analyze 分析打包大小