TSDX使用以及问题解决方案 | <p>最近浏览别人库时发现别人使用tsdx打包typescript，这个库确实挺有优势的，解决了ts打包成库的一些配置设置问题。 另外，还非常方便的整合了example和watch，文档，三位一体，相当方便。 今天来玩玩这个包。</p> <h2 id="-">官网</h2> <p><a href="https://www.npmjs.com/package/tsdx">https://www.npmjs.com/package/tsdx</a> <a href="https://tsdx.io/#quick-start">https://tsdx.io/#quick-start</a></p> <h2 id="-">安装</h2> <p>首先创建项目，使用：</p> <pre class="hljs"><code class="language-language"><span class="hljs-attribute">npx tsdx create mylib</span></code></pre> <p>然后有3个选项，basic，react，react-with-storybook。 由于一般用这玩意都需要演示，所以本篇选择第三个。</p> <pre class="hljs"><code class="language-language"><span class="hljs-symbol">:</span><span class="hljs-symbol">:</span><span class="hljs-symbol">:</span><span class="hljs-symbol">:</span><span class="hljs-symbol">:</span><span class="hljs-symbol">:</span><span class="hljs-symbol">:</span><span class="hljs-symbol">:</span><span class="hljs-symbol">:</span><span class="hljs-symbol">:</span>: <span class="hljs-symbol">:</span><span class="hljs-symbol">:</span><span class="hljs-symbol">:</span><span class="hljs-symbol">:</span><span class="hljs-symbol">:</span><span class="hljs-symbol">:</span><span class="hljs-symbol">:</span>: <span class="hljs-symbol">:</span><span class="hljs-symbol">:</span><span class="hljs-symbol">:</span><span class="hljs-symbol">:</span><span class="hljs-symbol">:</span><span class="hljs-symbol">:</span><span class="hljs-symbol">:</span><span class="hljs-symbol">:</span>: <span class="hljs-symbol">:</span><span class="hljs-symbol">:</span>: <span class="hljs-symbol">:</span><span class="hljs-symbol">:</span>: <span class="hljs-symbol">:+</span>: <span class="hljs-symbol">:+</span>: <span class="hljs-symbol">:+</span>: <span class="hljs-symbol">:+</span>: <span class="hljs-symbol">:+</span>: <span class="hljs-symbol">:+</span>: <span class="hljs-symbol">:+</span>: +<span class="hljs-symbol">:+</span> +<span class="hljs-symbol">:+</span> +<span class="hljs-symbol">:+</span> +<span class="hljs-symbol">:+</span> +<span class="hljs-symbol">:+</span> +<span class="hljs-symbol">:+</span> +<span class="hljs-comment">#+ +#++:++#++ +#+ +:+ +#++:+</span> +<span class="hljs-comment">#+ +#+ +#+ +#+ +#+ +#+</span> <span class="hljs-comment">#+# #+# #+# #+# #+# #+# #+#</span> <span class="hljs-comment">### ######## ######### ### ###</span> √ Choose a template · react-with-storybook √ Created mylib √ Installed dependencies Awesome! You<span class="hljs-string">'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</span></code></pre> <h2 id="-">打包配置</h2> <p>正常情况，如果你写库的话，它是生成一个文件导出，如果你的代码里有骚操作，或者有多个文件，那么你需要修改其默认的rollup配置的output： rollup文档 新建tsdx.config.js</p> <pre class="hljs"><code class="language-language"><span class="hljs-keyword">module</span>.exports = { <span class="hljs-comment">// This function will run for each entry/format/env combination</span> rollup(<span class="hljs-built_in">config</span>, options) { console.log(<span class="hljs-built_in">config</span>, options); <span class="hljs-built_in">return</span> <span class="hljs-built_in">config</span>; <span class="hljs-comment">// always return a config.</span> }, };</code></pre> <p>正常情况，你的样式是和js是分离的，如果你想每个js里都有css或者less,scss,sass，那么也是需要修改配置：</p> <pre class="hljs"><code class="language-language"><span class="hljs-keyword">const</span> postcss = require(<span class="hljs-string">'rollup-plugin-postcss'</span>); <span class="hljs-keyword">module</span>.exports = { rollup(<span class="hljs-built_in">config</span>, options) { <span class="hljs-built_in">config</span>.plugins.push( postcss({ inject: false, extract: !!options.writeMeta, extensions: [<span class="hljs-string">".less"</span>, <span class="hljs-string">".css"</span>] }), ); <span class="hljs-built_in">return</span> <span class="hljs-built_in">config</span>; }, };</code></pre> <h2 id="example-bug">example BUG</h2> <p>example文件夹是用parcel进行构建，先进行安装，如果npm run start可以成功启动则忽略此段。 如果失败，提示：Invalid Version: undefined 由at new SemVer此处报错，则需要修改package.json配置：</p> <pre class="hljs"><code class="language-language"> <span class="hljs-string">"scripts"</span>: { <span class="hljs-string">"start"</span>: <span class="hljs-string">"parcel index.html"</span>, <span class="hljs-string">"build"</span>: <span class="hljs-string">"parcel build index.html"</span>, <span class="hljs-string">"preinstall"</span>: <span class="hljs-string">"npx npm-force-resolutions"</span> },</code></pre> <p>在script中增加preinstall，这样在npm i的时候，会强制执行。 package.json加入resolution:</p> <pre class="hljs"><code class="language-language"><span class="hljs-string">"resolutions"</span>: { <span class="hljs-string">"@babel/preset-env"</span>: <span class="hljs-string">"7.13.8"</span> }</code></pre> <p>这样再重新进行安装启动，则可以解决此问题。</p> <h2 id="stories">stories</h2> <p>由于选了第三个选项，所以自带了storybook，storybook更新挺快啊，上次文章讲的是5，现在已经6.2了。 可以看见有个文件夹是.storybook，这个就是其配置文件，在main.js下的addons中如果有@storybook/addon-essentials插件的，说明已经是6了，因为5是没有这个插件的。essential插件是老版的knobs（现在更名为control），docs插件，actions插件，viewport插件，background的插件的集合。确实也都是相当实用的插件。 由于以前写过了csf和mdx的写法，这里大同小异，就不写了。</p> <h2 id="size-limit">Size-limit</h2> <p>tsdx使用了size-limit去分析和压缩库 size-limit 地址 使用npm run size执行size-limit 使用npm run analyze 分析打包大小</p>