Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
493 views
in Technique[技术] by (71.8m points)

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

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

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
等待大神解答

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...