未分類
16 8 月 2020

如何将.vue 文件编译成 es mdule 使用？

如何将.vue 文件编译成 es mdule 使用？

資深大佬 : konnga403 9

技术栈：vue2+element-ui+vue-cli4

需求：现在项目上需要拆分代码，我想通过 lerna 管理前端的业务模块代码，抽离一个主要的模块，编译过后，通过 npm 包的形式来给其他业务模块使用。

现在的方式： 我目前通过 vue.config.js 配置 webpack，打包出 lib 文件，现在可以满足上面的需求；但是必须不能抽离公共文件，也就是：config.optimization.delete(‘splitChunks’) 这样导致 lib 文件过大，不删除 splitChunks 的话，打包出来的文件运行报错，无法使用。

我在想，能不能仅编译.vue 文件成.js 文件，符合 es module 的形式来直接使用呢？ 请教一下各位大佬

大佬有話說 (7)

  • 資深大佬 : ruoxie

    打 npm 包的话，用 rollup 吧，之前做组件库打包的时候 webpack 打包不出 esm，就改用了 rollup 。打包.vue ，.tsx ，.jsx 都没有问题

  • 資深大佬 : erwin985211

    能够打包成 js，你看 vuecli3 的文档里有 整个项目打包一个 js 封装成一个 Web Components 来用

  • 資深大佬 : Reapper

    我之前也想做这样的功能，但是没找到方案。rollup 好像是个不错的方法，感谢一！

  • 主 資深大佬 : konnga403

    @ruoxie 我原来打包组件库的时候也是用的 vue-cli 直接处理，vue 配置文件中，配置多个入口，不用 splitChunks，打包出来的组件文件是 es 模块可用的，但就是体积很大；我去试试 rollup，感谢。

  • 主 資深大佬 : konnga403

    @erwin985211 这样是把所有文件打包在一起使用了，我想的是像组件库那样，引用具体的模块。react+lerna 做过，但是 vue 要处理.vue 文件，不像 react 那样直接用 babel 编译就行…

  • 主 資深大佬 : konnga403

    @Reapper 老哥有结果分享一下呀

  • 資深大佬 : em2046

    可以参考官方 ui 项目的做法，也是使用的 rollup 打包
    https://github.com/vuejs/ui
    不过如果想要 css 也能按需加载，就得参考目前流行的其他组件库的写法了，如 https://github.com/ant-design/babel-plugin-import