Question

我想就如何构建易于使用和摇摇欲坠的优化构建提出建议。我正在使用汇总来打包由多个组件组成的UI库。

我的体系结构是：

/src
  /index.js
  /components
    /index.js
    /component1
      /index.js
      /Comp.vue
    ...
    /componentN
      /index.js
      /Comp.vue
  /directives
    /index.js
    /directive1
      /index.js
    ...
    /directiveN
      /index.js

src/components/index.js的样子

export { default as Comp1 } from './component1
...
export { default as CompN } from './componentN

src/directives/index.js的样子

export { default as Directive1 } from './directive1
...
export { default as DirectiveN } from './directiveN

每个内部index.js只是为了方便起见，例如

import Comp from './Comp.vue'
export default Comp`

最后，src/index.js将使用：

import { * as components } from './components'
import { * as directives } from './directives'

export { components, directives }

构建时，汇总配置如下：

{
  input: 'src/index.js',
  output: {
    file: 'dist/lib.esm.js',
    format: 'esm',
}

（当然，我避免使用所有可移植的丑陋插件，我认为它们会对这个问题产生干扰）

因此，此版本看起来不错，并且可以运行，但是...

使用非常不便：

import { components } from 'lib'
const { Comp1 } = components

这种构造在使用时也可能会打破树的震动，因为当仅需要components时，我们会导入完整的Comp1对象。

我知道我不应该是一个关心摇树的人，而应该提供一个具有摇树功能的库，这就是这个问题。当使用最简单的@ vue / cli模板测试我的构建时，整个库都已导入，甚至@ vue / cli都声称已启用了webpack-treeshaking功能。

我不介意构建单独的文件，而不是构建一个大型esm构建，但是据我所知，可以通过摇晃来构建一个文件。我担心构建单独的文件是因为CompA内部可能需要CompB，如果用户也需要CompB，那么在这种情况下，它可能会在构建中重复（例如，一个外部使用版本和一个内部使用版本。

我对如何进行优化一无所知。任何指针都受到高度欢迎。

Answer 1

就目前而言，我能找到的唯一有效解决方案是在dist/文件夹中的同一树结构中分别构建所有文件。我决定构建文件以提供Vue文件格式样式块，而无需最终用户进一步构建或配置。

构建后看起来像这样：

/src
  /index.js
  /components
    /index.js
    /component1
      /index.js
      /Comp.vue
    ...
    /componentN
      /index.js
      /Comp.vue
  /directives
    /index.js
    /directive1
      /index.js
    ...
    /directiveN
      /index.js

/dist
  /index.js
  /components
    /index.js
    /component1
      /index.js
    ...
    /componentN
      /index.js
  /directives
    /index.js
    /directive1
      /index.js
    ...
    /directiveN
      /index.js

我创建了一个小的递归函数来查找所有“ index.js”，并将此列表与汇总多入口点功能一起使用。希望汇总会创建所有子文件夹，因此不需要检查或mkdir -p。

// shorthand utility for 'find all files recursive matching regexp (polyfill for webpack's require.context)'
const walk = (directory, regexp) => {
  let files = readdirSync(directory)

  if (directory.includes('/examples'))
    return []

  return files.reduce((arr, file) => {
    let path = `${directory}/${file}`
    let info = statSync(path)

    if (info.isDirectory())
      return arr.concat(walk(path, regexp))
    else if (regexp.test(file))
      return arr.concat([path])
    else
      return arr
  }, [])
}

// ...

const esm = walk(`${__dirname}/src`, /^index\.js$/)
  .map(file => ({
    input: file,

    output: {
      format: 'esm',
      file: file.replace(`${__dirname}/src`, CONFIG.module)
    },
    ...
  }))

该过程的最后一部分是将package.json复制/粘贴到dist/，cd并从其中复制npm publish ...这已集成到我们的CI中任务，因为它与汇总或构建不直接相关，而是与发布有关。

这不是完美的，但是由于缺乏输入，这是我发现的唯一方法。希望对您有所帮助。

优化汇总配置以启用树摇动

1 个答案: