提取公共依赖 doc - Githubissues

GreatAuk commented 4 years ago

Background

Proposal

目前已经是 2.0 的版本了，希望能补全对应的文档

FranklinTesla commented 4 years ago

we need this too

gongshun commented 4 years ago

注册子应用时，通过props将这些依赖传给子应用，子应用本身配置external

dengBox commented 4 years ago

注册子应用时，通过props将这些依赖传给子应用，子应用本身配置external

props传递之后，比如element等ui库，子应用在vue.use()时会报错：$listeners is readonly.。有遇到过相似的情况吗

cpa0701 commented 4 years ago

注册子应用时，通过props将这些依赖传给子应用，子应用本身配置external

props传递之后，比如element等ui库，子应用在vue.use()时会报错：$listeners is readonly.。有遇到过相似的情况吗

遇到了，有解决方法吗

dengBox commented 4 years ago

注册子应用时，通过props将这些依赖传给子应用，子应用本身配置external

props传递之后，比如element等ui库，子应用在vue.use()时会报错：$listeners is readonly.。有遇到过相似的情况吗

遇到了，有解决方法吗

之前看了vue源码，是因为注册的组件对象是同一个对象，在第二次组件初始化时候，vue会报错，但是不影响使用，之前想过将组件对象注册时候进行深拷贝，但是卡在function深拷贝这一块儿就没考虑了。现在的方法是，引用相同的链接，等于是走http缓存，比重新加载快一丢丢吧。

cpa0701 commented 4 years ago

注册子应用时，通过props将这些依赖传给子应用，子应用本身配置external

props传递之后，比如element等ui库，子应用在vue.use()时会报错：$listeners is readonly.。有遇到过相似的情况吗

遇到了，有解决方法吗

之前看了vue源码，是因为注册的组件对象是同一个对象，在第二次组件初始化时候，vue会报错，但是不影响使用，之前想过将组件对象注册时候进行深拷贝，但是卡在function深拷贝这一块儿就没考虑了。现在的方法是，引用相同的链接，等于是走http缓存，比重新加载快一丢丢吧。

相同的链接是指打成umd库然后去引用吗？

dengBox commented 4 years ago

注册子应用时，通过props将这些依赖传给子应用，子应用本身配置external

props传递之后，比如element等ui库，子应用在vue.use()时会报错：$listeners is readonly.。有遇到过相似的情况吗

遇到了，有解决方法吗

之前看了vue源码，是因为注册的组件对象是同一个对象，在第二次组件初始化时候，vue会报错，但是不影响使用，之前想过将组件对象注册时候进行深拷贝，但是卡在function深拷贝这一块儿就没考虑了。现在的方法是，引用相同的链接，等于是走http缓存，比重新加载快一丢丢吧。

相同的链接是指打成umd库然后去引用吗？

对的，主项目启动加载了，后面子系统加载的都是缓存的文件，

cpa0701 commented 4 years ago

注册子应用时，通过props将这些依赖传给子应用，子应用本身配置external

props传递之后，比如element等ui库，子应用在vue.use()时会报错：$listeners is readonly.。有遇到过相似的情况吗

遇到了，有解决方法吗

之前看了vue源码，是因为注册的组件对象是同一个对象，在第二次组件初始化时候，vue会报错，但是不影响使用，之前想过将组件对象注册时候进行深拷贝，但是卡在function深拷贝这一块儿就没考虑了。现在的方法是，引用相同的链接，等于是走http缓存，比重新加载快一丢丢吧。

相同的链接是指打成umd库然后去引用吗？

对的，主项目启动加载了，后面子系统加载的都是缓存的文件，

但是vuecli打出来的umd库没有挂载在window上，导致在development时无法正常使用，在prod时倒很正常，有遇到过吗

dengBox commented 4 years ago

你的这个写法在development时是不会引入这个链接的啊，所以他肯定是局部变量，还有你的webpack-externals配置也要注意

// vue.config.js
// 是否为生产环境
const isProduction = process.env.NODE_ENV !== 'development'

// 本地环境是否需要使用cdn
const devNeedCdn = false

// cdn链接
const cdn = {
  // cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称）
  externals: {
    // vue: 'Vue',
    vuex: 'Vuex',
    'vue-router': 'VueRouter',
    // 三方资源
    echarts: 'echarts',
    'echarts-wordcloud': {},
    'shsc-ui': 'shscUI',
    'shsc-business-ui': 'shscBusinessUI'
  },
  // cdn的css链接
  css: [
    // 'https://testqiniu.shuhaisc.com/index.css'
  ],
  // cdn的js链接
  js: [
    // 'https://cdn.staticfile.org/vue/2.6.10/vue.min.js',
    'https://testqiniu.shuhaisc.com/shsc-ui/index.umd.min.js',
    'https://testqiniu.shuhaisc.com/shsc-business-ui/index.umd.min.js',
    'https://cdn.staticfile.org/vuex/3.0.1/vuex.min.js',
    'https://cdn.staticfile.org/vue-router/3.1.3/vue-router.min.js',
    'https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js',
    'https://cdn.jsdelivr.net/npm/echarts-wordcloud@1.1.3/dist/echarts-wordcloud.min.js'
  ]
}

module.exports = {
  productionSourceMap: false,
  chainWebpack: config => {
    // config
    //   .entry('index')
    //   .add('babel-polyfill')
    //   .end()
    // 移除 prefetch 插件
    config.plugins.delete('prefetch')
    // 移除 preload 插件
    config.plugins.delete('preload')

    config.plugin('html').tap(args => {
      // 生产环境或本地需要cdn时，才注入cdn
      if (isProduction || devNeedCdn) args[0].cdn = cdn
      return args
    })

    if (isProduction) {
      config.output
        .set('filename', 'static/js/[name].[contenthash:8].js')
        .set('chunkFilename', 'static/js/[name].[contenthash:8].js')
      config.optimization.minimize(true)
      config.optimization.splitChunks({
        chunks: 'all'
      })
    }
  },
  configureWebpack: config => {
    // 用cdn方式引入，则构建时要忽略相关资源
    if (isProduction || devNeedCdn) config.externals = cdn.externals
    // 生产环境相关配置
    if (isProduction) {
      config.devtool = falseer: {
    open: true
    // headers: {
    //   'Access-Control-Allow-Origin: http://172.20.0.206'//一般用法（*，指定域，动态设置），3是因为*不允许携带认证头和cookies
    //   'Access-Control-Allow-Origin': '*'
    // }
  },
  pluginOptions: {
    i18n: {
      locale: 'zh-cn',
      fallbackLocale: 'en',
      localeDir: 'locale',
      enableInSFC: false
    },
    moment: {
      locales: [
        'zh-cn',
        'en'
      ]
    }
  }
}

<!--public/index.html -->

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>蜀海海纳平台</title>
  <!-- 使用CDN的CSS文件 -->
  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
    <!-- <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style"> -->
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
  <% } %>
</head>

<body>
  <noscript>
    <strong>We're sorry but gaia-web doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  </noscript>
  <div id="base-wrap"></div>
  <!-- built files will be auto injected -->
  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
  <% } %>
</body>
</html>

// main.js
// ...
// 引入公司ui组件
import shscUI from 'shsc-ui'
import shscBusinessUI from 'shsc-business-ui'
// 组件库中的语言
// import en from 'shsc-ui/dist/locale/en'
// import zh from 'shsc-ui/dist/locale/zh-cn'

Vue.use(shscUI)
Vue.use(shscBusinessUI)
// eslint-disable-next-line new-cap
const scui = new shscUI.init({
  _vue: Vue,
  size: 'large'
})

Vue.config.productionTip = false

Vue.$moment = moment
Vue.prototype.$moment = moment
Vue.prototype.$utils = untils
// ...

希望能帮到你。。

cpa0701 commented 4 years ago

我知道shiya是要去掉前面一段，但是在dev模式下一直报组件未注册，prod正常