V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
konnga403
V2EX  ›  Vue.js

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

  •  
  •   konnga403 · 2020-08-25 17:56:38 +08:00 · 2501 次点击
    这是一个创建于 1540 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

    7 条回复    2020-08-26 12:42:42 +08:00
    ruoxie
        1
    ruoxie  
       2020-08-25 19:11:22 +08:00
    打 npm 包的话,用 rollup 吧,之前做组件库打包的时候 webpack 打包不出 esm,就改用了 rollup 。打包.vue ,.tsx ,.jsx 都没有问题
    erwin985211
        2
    erwin985211  
       2020-08-25 19:25:21 +08:00
    能够打包成 js,你看 vuecli3 的文档里有 整个项目打包一个 js 封装成一个 Web Components 来用
    Reapper
        3
    Reapper  
       2020-08-26 09:12:20 +08:00
    我之前也想做这样的功能,但是没找到方案。rollup 好像是个不错的方法,感谢一楼!
    konnga403
        4
    konnga403  
    OP
       2020-08-26 09:50:59 +08:00
    @ruoxie 我原来打包组件库的时候也是用的 vue-cli 直接处理,vue 配置文件中,配置多个入口,不用 splitChunks,打包出来的组件文件是 es 模块可用的,但就是体积很大;我去试试 rollup,感谢。
    konnga403
        5
    konnga403  
    OP
       2020-08-26 09:53:02 +08:00
    @erwin985211 这样是把所有文件打包在一起使用了,我想的是像组件库那样,引用具体的模块。react+lerna 做过,但是 vue 要处理.vue 文件,不像 react 那样直接用 babel 编译就行...
    konnga403
        6
    konnga403  
    OP
       2020-08-26 10:52:05 +08:00
    @Reapper 老哥有结果分享一下呀
    em2046
        7
    em2046  
       2020-08-26 12:42:42 +08:00
    可以参考官方 ui 项目的做法,也是使用的 rollup 打包
    https://github.com/vuejs/ui
    不过如果想要 css 也能按需加载,就得参考目前流行的其他组件库的写法了,如 https://github.com/ant-design/babel-plugin-import
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1050 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 19:56 · PVG 03:56 · LAX 11:56 · JFK 14:56
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.