开发过程中进行了三种方式的尝试：webpack+rollup+tsc
1.rm -rf dist &&tsc -p tsconfig.json &&lessc src/index.less ./dist/index.css
2.rm -rf dist &&webpack --mode production
3.rollup -wc
tsc+less：
效果：打包ts，less需要手动整合，不能按需加载
webpack:
效果：打包ts，会把webpack的东西打包进项目里，打包时间长
rollup 效果最好，最简单
microbundle-crl 这是一个封装好的配置rollup打包组件库的插件
package.json 配置 "build": "microbundle-crl --no-compress --format modern" 打包成 es6
3.修改package.json
4.修改rollup.config.js
5.npm run build
打开打包好的文件看一下，2000+行，实际上react还是被打包了进来
6.修改rollup.config.js
7.npm run build
8.关于语法的问题
这个也是我在最开始说的，在tsconfig中控制
主要就是target和module这两个参数
同样的，也可以再引入rollup的bable插件再转一次，这个就看每个开发者的使用情况了，如果你清楚你自己项目的webpack配置，大可以不支持某些版本的JavaScript
9.调试问题
npm link 这个命令，可以直接联入某个项目
提高程序员的工作经验除了通过项目实际开发以外，只有平时的知识积累以及简单的程序开发测验等项目来提高了。今天，我们就一起来了解一下，在提高开发工程师操作经验的时候，都有哪些方面是需要掌握的。
在此之前，如果你需要使用一些外部的库或者任何插件，你都需要手动下载相应的JavaScript和CSS文件，然后把它们放进项目中。但是如果这些库或者插件发布新版本的话，你也得在项目中做出相应的更新，这样管理项目是非常麻烦的。包管理器帮助你解决了这个麻烦，它们可以帮助你自动地将外部库和插件引入到项目中，这样你就不必专门手动更新外部文件了。包管理器有yarn和npm，两者几乎相同，都只有安装的功能。你可以选择其中的任何一个，一旦学会使用其中的一个，另一个也就会了。
让我们学以致用
当你对包管理器有了基本的了解之后，就可以在你制作的网页中引入一些外部库。例如你可以安装一些Toast插件，当用户点击按钮的时候，用Toast插件向他们显示信息或者你可以创建一个登陆表单，利用一些表单验证库来进行表单验证。可以学习如何使用不同的库，并了解如何安装不同的版本。
CSS预处理器
预处理器让CSS的功能更加丰富。CSS预处理器有Sass,Less,Stylus等等。如果让我选择的话，我喜欢Sass。近比较流行的CSS预处理器是PostCSS,它的作用相当于CSS的解析器，了解它的使用也是很不错的。它可以单独使用，也可以配合Sass使用。我的建议是先学会Sass，后面如果你有时间的话可以再研究PostCSS.
CSS框架
你不需要再学习CSS框架，当然如果你想学习的话，也有很多选择。我喜欢的CSS框架是Bootstrap、Materialize和Bulma。但是结合现在的市场需求来说，我会选择Bootstrap。
CSS文件管理
随着项目的复杂程度增加，CSS也会开始变得混乱而无法维护。我们也有很多方式可以更好地构建CSS，以实现可伸缩性。例如OOCSS、SMACSS、SUITCSS、Atomic和BEM。你可以了解下它们之间的不同，我个人更喜欢BEM。
构建工具
构建工具可以帮助你构建、打包和开发JavaScript应用程序。这里包括校验工具、自动化构建工具及打包工具。
自动化构建工具有npm、gulp、grunt等。但是现在Webpack已经能够实现Gulp的很多功能，所以，现在通常都只使用npm来配合webpack完成任务自动化。你不必学习Gulp，当然以后如果你有时间的话，也可以了解一下，看看它是否适用于你的项目。
校验工具有ESLint、JSLint、JSHint和JSCS，但是目前大部分人都使用ESLint。
打包工具有Parcel、Webpack、Rollup、Browserify等等。如果必须选择一个的话，请毫不犹豫地选择Webpack。Rollup也很常用，但是北大青鸟丽江计算机学院http://www.kmbdqn.cn/建议将它用在库里面。在开发app的时候，请使用Webpack。所以，现在请开始自学Webpack，如果你愿意的话，了解一下Rollup也可以。
