问答

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

作者:admin 2021-07-10 我要评论

改造一个spa的时候遇到一个如题的问题 公司有一个前端组件库,入口文件大概长这样: import MgToolbar from './src/components/navigator/mg-toolbar'const comp...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

改造一个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

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

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • elementUI表单Object.assign处理后无法

    elementUI表单Object.assign处理后无法

  • nacos作为配置中,有时可以加载到配置

    nacos作为配置中,有时可以加载到配置

  • font-spider压缩字体后,文件大小没有

    font-spider压缩字体后,文件大小没有

  • Vue SSR babel node_modules中的一个包

    Vue SSR babel node_modules中的一个包

腾讯云代理商
海外云服务器