vue.js 跨项目用的公共组件库,有什么好的 starter pack?

2017-04-17 03:46:03 +08:00
 jsq2627
需求是这样的,有几个项目有一些公共的组件,想要把这些组件提取出来单独形成一个公共组件库,发布到 npm 上面由其他项目引用。有没有一些好的 starter pack 可用?

尝试了自己配置 webpack ,有些疑问:
1. 是发布 webpack 编译后的文件到 npm 还是发布原始的 .vue 文件?
2. 看了几个主流的 UI 库都是发布编译后的文件,那么如果应用和组件库用了公共的包,比如 moment.js ,应用编译出的结果是否会重复包含 moment.js ?
3. webpack 2 已经有了 tree shaking ,是否还需要像 element-ui / mint-ui 那样用 babel 插件实现按需导入?
3157 次点击
所在节点    问与答
4 条回复
ChefIsAwesome
2017-04-17 07:08:04 +08:00
npm 上的应该是编译后的。因为一般人用 babel 的时候都会过滤掉 node_module 里的文件。
tree shaking 确实有用。发到 npm 上的东西在用 babel 编译的时候记得排除 es6 modulel 。
moment 这种是依赖,不应该也不会被编译。

整个过程大概是这样:你的 src 文件是 es6 写的。你写个脚本,把 src 还有根目录底下的 package.json 复制到 dist 文件夹里头。然后对 dist 里头你要发布的所有文件做 babel 。最后在 dist 里头做 npm publish 。
airyland
2017-04-17 07:29:06 +08:00
说一下非主流 UI 库 VUX 的方式:

1. 分发的是 .vue 文件,早期需要在 webpack 配置 babel 编译源码的 js 文件,现在 vux-loader 直接做了这一步。
2. 如果已经是使用生成的 umd 文件来分发,项目再次引入 moment 当然会再被打包一次
3. 组件是组件, tree shaking 在这里没多少作用。引用要用到的一两个组件和引入了全部组件文件体积当然是不一样的,况且组件会逐渐增加,如果你是 PC 端全部引入大概没大多问题,移动端必须按需加载。

按需加载一般是要求单独根据路径来引用,一些库是使用 babel 插件来实现。 VUX 使用的是配套工具 vux-loader 来实现。 umd 打包会导致无法进行代码复用,一个依赖库会被不同组件分别打包进去,体积偏大。
murmur
2017-04-17 08:03:37 +08:00
moment.js 你注意点哦,这东西坑的很,默认会打包所有的语言文件徒增 150k 的大小
otakustay
2017-04-17 13:03:00 +08:00
1. both
2. 既然上面一个问题是 both 了,选择权就在使用者,你不用管
3. no

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/355297

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX