将我的库分离到 Libs、Core 和插件

Question

我在这个世界上很新，所以请忍受我。

我有我的大图书馆，我正在尝试将其转换为ES6模块，babel＆amp;webpack以后将其捆绑到几个文件。

我的图书馆文件夹看起来像这个

--src
  -- core
     -- folder1
     -- folder2
  -- addons
     -- addon 1
        -- addon 1 files and folders
     -- addon 2
        -- addon 2 files and folders
  -- libs
     -- internal
        -- internal lib1 
        -- internal lib2 
     -- external
        -- external lib1 
        -- external lib2 

我的库代码与2-核心代码和插件分开，我正在使用一些库(libs文件夹(

我的愿望是：

• 所有内部LIB都将捆绑到一个Libs File
• 外部液井被排除在捆绑中
• 所有核心文件都将捆绑到一个核心文件
• 我所有的插件都将捆绑到每个插件文件中
• 注意：插件正在使用核心文件，而不是捆绑其中

最终结果：libs.jscore.jsaddon1.jsaddon2.js

我的客户将必须使用前2个JS文件。addon将按照他们的意愿包括在内。

到目前为止，我已经设法使用CommonsChunkPlugin

分开内部lib

new webpack.optimize.CommonsChunkPlugin({
    name: "libs",
    minChunks: function(module){
      return module.context && module.context.indexOf("\libs\internal\") !== -1;
    },
  });

使用null-loader

忽略了外部lib

{
   test: /libs\external/,
   loader: 'null-loader'
},

我的入口点JS看起来像

从

导入A

"./core/a";
import b from "./core/b";
import addon1C from "./addons/addon1/c";
const myLib = {
   core: {a,b},
   addons: {addon1C}
}
export {myLib}

现在问题从核心和插件开始。

如果我跳过了插件部分，则在我的客户端，包括2个脚本(libs，core(

，简单的 myLib.core.a正在工作。

我的问题是否可以防止插件中的核心代码捆绑。

我尝试使用另一个块插件来完成此操作，但是它会在模块中引起一些错误，因为插件使用了核心代码，并且输入点使用addons将其导出，因此它找不到模块。

尝试了2个入口点，因此我将拥有第一个入口点，而无需插入点并分别导出插件，但现在核心代码已捆绑在其中。

那么，我该怎么做？或者，如果有更好的方法可以完成我到目前为止所做的任何事情。我很高兴学习。

Answer 1

为了实现这一目标，我认为您必须使用其他方法。我也有类似的情况，其他一些团队需要按需扩展应用程序的核心功能。

为了实现这一目标，我必须确保 core 和附加不要直接互相交流。相反，您的核心代码应提供某种API，该API将由您的附加组件使用。

从另一端，当您的附加组件尝试导入核心时，您将不得不提供shim文件，而不是核心本身。

我将尝试在这里写几个示例：

// core
export default const Core = {}
const addons = []
Core.addPlugin = function(addOn) {
   addons.push(addOn) // or doing something else
}
// shim-core.js
export default typeof window.Core !== undefined ? window.Core : Core
// add-on
import Core from 'shim-core'
const addOn = function() {
   // something funky
   return {}
}
Core.addPlugin(addOn)

我希望它可以帮助您了解"体系结构"