typescript开发react组件的流程

Question

想了解像antd这种公共组件的开发流程。有几个点比较疑惑

1. 这种组件开发时是使用webpack或者别的构建工具进行开发的吗？那开发完了之后这些工具怎么去掉？
2. package.json这种文件里面的dependency怎么处理，开发时候肯定会添加各种各样的依赖进去，怎么才能做到只有最后组件需要的被保存下来
3. antd的组件大都是用typescript开发的，同样，这种组件在发布之前肯定都是要先转es5的，那都是直接用tsc命令直接编译吗，还是用别的办法，因为我发现我想要在我用ts写的组件里引入antd的组件再进行tsc编译发布，最后的组件是不带样式的，这种有什么解决吗？

望大神不吝赐教。

Answer 1

1. 是，开发完后输出的js中不带有工具
2. 这个主要还是要养成好习惯吧，尽量少用依赖，用或不用都及时更新package.json文件，另外官方有一个模块依赖分析工具analyse
3. 不知道你是想要有样式还是不要样式，除了使用tsc编译，可以利用webpack+ts-loader来编译，至于样式，如果想内联在一个组件中，可以采用css in js的写法

Answer 2

1. webpack一般用于SPA（单页面应用）的开发，这样webpack的输出就是最终的web前端部分，不存在开发完了去掉的问题。不过一般开发阶段和发布阶段用不同的webpack配置，主要是开发阶段需要sourcemap（源码映射），hmr（热更新）等用于调试
2. webpack可以做到在最终发布版中只包括你用到的组件，一般就是1~2个很大的经过混淆压缩的js文件
3. webpack作为构建工具，会使用loader把ts,tsx,jsx等代码编译成最终的es5的js代码。现在一般spa开发中包括样式最终也是编译成js的，也就是用js代码来设置样式。