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转成低阶语法,然而实际编译过程中我发现并没有:
琢磨了两天不知何解,希望有大神可以指点一下迷津,万分感谢!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论