Vue SSR babel node_modules中的一个包不成功?

发布于 2022-09-12 03:22:06 字数 2429 浏览 16 评论 0

改造一个spa的时候遇到一个如题的问题
公司有一个前端组件库,入口文件大概长这样:

import MgToolbar from './src/components/navigator/mg-toolbar'

const components = [
    MgToolbar
]

const install = function (Vue) {
    components.forEach(function (component) {
        Vue.component(component.name, component)
    })
}

export {
    install as default,
    MgToolbar
}

这个组件库作为一个library被安装到了node_modules中并且没有被build,平时使用的时候是这样的:
简化代码

// vueUse.js
import MgComponents from 'mg-front-end-framework'

export default ({ app, Vue }) => {
    Vue.use(MgComponents)
}

然后入口引入

// main.js
import Vue from 'vue'
import { createRouter } from './router'
import { createStore } from './store'
import { sync } from 'vuex-router-sync'
//import './registerServiceWorker'

Vue.config.productionTip = false

export async function createApp () {
    let plugins = []
    let subPlugins = [
        import('./plugins/vueMixin')
    ]
    const router = createRouter()
    const store = createStore()
    let appOptions
    sync(store, router)
    await Promise.all([
        ...subPlugins,
        import('./App.vue')
    ]).then(res => {
        console.log(res)
        const App = res[res.length - 1].default
        res = res.slice(0, res.length - 1)
        appOptions = {
            router,
            store,
            render: h => h(App)
        }
        plugins = [...plugins, ...res]
        plugins.forEach(plugin => {
            console.log(plugin)
            plugin.default({ app: appOptions, router, store, Vue })
        })
    }).catch(err => {
        console.log(err)
    })
    
    const app = new Vue(appOptions)
    return { app, store, router }
}

但ssr的时候必然需要babel转义es6等的语法,因为node不支持,于是,修改了webpack.base.config.js:

{
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: function (modulePath) {
                    return (
                        /node_modules/.test(modulePath) &&
                        !/mg-front-end-framework/.test(modulePath) &&
                        !/quasar/.test(modulePath)
                    )
                }
            },

上面mg-front-end-framework就是包名
根据我的理解应该是会被babel转成低阶语法,然而实际编译过程中我发现并没有:
image.png

琢磨了两天不知何解,希望有大神可以指点一下迷津,万分感谢!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文