Question

TL; DR;

如何在webpackChunkName模式下用vue-cli重命名--target lib？

大家好，我正在使用vue-cli为Vue js创建一个库。

此行将我的库的输出生成为 umd ， umd.min 和 common-js ：

vue-cli-service build --target lib --name mylib ./src/components/mylib.vue --dest ./dist

由于我的库具有异步模块（json文件中为i18n语言环境），所以我想修改Webpack来控制最终dist文件夹中所有文件的输出，但未成功。

在外部化所有语言环境文件以提高性能之前，我已经做到了：

dist/
|- mylib.common.js
|- mylib.umd.js
|- mylib.umd.min.js
|- mylib.css

现在，按需导入语言环境：

import(/* webpackInclude: /\.json$/, webpackChunkName: "[request]" */ `./i18n/${locale}`)
    .then(response => (this.texts = response.default))

这是输出：

dist/
|- mylib.common.js
|- mylib.umd.js
|- mylib.umd.min.js
|- mylib.css
|- en.common.min.js
|- en.umd.js
|- en.umd.min.js
|- es.common.min.js
|- es.umd.js
|- es.umd.min.js
|- de.common.min.js
|- de.umd.js
|- de.umd.min.js
...

理想情况下，我只希望为我的所有lib版本获取一个语言环境文件，因为生成的语言环境文件与 umd 和 common-js 完全相同，并组织在这样的文件夹中：

dist/
|- mylib.common.js
|- mylib.umd.js
|- mylib.umd.min.js
|- mylib.css
|- i18n
   |- en.js
   |- es.js
   |- de.js
   ...

我尝试调整导入webpack magic comment，但得到3个i18n文件夹，如下所示：

import(/* webpackInclude: /\.json$/, webpackChunkName: "i18n/[request]" */ `./i18n/${locale}`)
    .then(response => (this.texts = response.default))

dist/
|- mylib.common.
   |- i18n
   |- en.js
|- mylib.umd.
   |- i18n
   |- en.js
|- mylib.umd.min.
   |- i18n
   |- en.js

当我将其添加到vue.config.js时，它会将我的文档的版本修改为docs/（vue-cli-service build），但不适用于我的lib到dist/ （vue-cli-service build --target lib）

  configureWebpack: {
    output: {
      filename: '[name].testing-bundle.js',
      chunkFilename: '[name].testing-bundle.js'
    }
  },

Answer 1

我终于找到了合适的解决方法！

我最终添加了一个构建后脚本（构建后自动触发），如下所示：

"postbuild-bundle": "rm -rf ./dist/libname.common.i18n ./dist/libname.umd.i18n && mv ./dist/libname.umd.min.i18n ./dist/i18n"

希望这可以帮助某人。

编写库时，模块名称为Webpack＆vue-cli

1 个答案: