This topic created in 3313 days ago, the information mentioned may be changed or developed.
需求是这样的，有几个项目有一些公共的组件，想要把这些组件提取出来单独形成一个公共组件库，发布到 npm 上面由其他项目引用。有没有一些好的 starter pack 可用？
尝试了自己配置 webpack ，有些疑问：
1. 是发布 webpack 编译后的文件到 npm 还是发布原始的 .vue 文件？
2. 看了几个主流的 UI 库都是发布编译后的文件，那么如果应用和组件库用了公共的包，比如 moment.js ，应用编译出的结果是否会重复包含 moment.js ？
3. webpack 2 已经有了 tree shaking ，是否还需要像 element-ui / mint-ui 那样用 babel 插件实现按需导入？
Supplement 1 · May 9, 2017
参照 2 楼 @
airyland 的方案，最后我们 fork 了整个 vux 的仓库作为基础，把 vux 的组件替换成我们内部的公共组件，成功解决问题。
4 replies • 2017-04-17 13:03:00 +08:00
 |
|
1
ChefIsAwesome Apr 17, 2017 via Android  1
npm 上的应该是编译后的。因为一般人用 babel 的时候都会过滤掉 node_module 里的文件。
tree shaking 确实有用。发到 npm 上的东西在用 babel 编译的时候记得排除 es6 modulel 。
moment 这种是依赖，不应该也不会被编译。
整个过程大概是这样：你的 src 文件是 es6 写的。你写个脚本，把 src 还有根目录底下的 package.json 复制到 dist 文件夹里头。然后对 dist 里头你要发布的所有文件做 babel 。最后在 dist 里头做 npm publish 。
|
 |
|
2
airyland Apr 17, 2017 1
说一下非主流 UI 库 VUX 的方式：
1. 分发的是 .vue 文件，早期需要在 webpack 配置 babel 编译源码的 js 文件，现在 vux-loader 直接做了这一步。
2. 如果已经是使用生成的 umd 文件来分发，项目再次引入 moment 当然会再被打包一次
3. 组件是组件， tree shaking 在这里没多少作用。引用要用到的一两个组件和引入了全部组件文件体积当然是不一样的，况且组件会逐渐增加，如果你是 PC 端全部引入大概没大多问题，移动端必须按需加载。
按需加载一般是要求单独根据路径来引用，一些库是使用 babel 插件来实现。 VUX 使用的是配套工具 vux-loader 来实现。 umd 打包会导致无法进行代码复用，一个依赖库会被不同组件分别打包进去，体积偏大。
|
 |
|
3
murmur Apr 17, 2017
moment.js 你注意点哦，这东西坑的很，默认会打包所有的语言文件徒增 150k 的大小
|
 |
|
4
otakustay Apr 17, 2017
1. both
2. 既然上面一个问题是 both 了，选择权就在使用者，你不用管
3. no
|
Select Language