web-dev-qa-db-ja.com

Vue Cli 3-Webコンポーネントのコンパイル時にdistにjsファイルを含める

私はVue Cli 3で作成されたプロジェクトで作業しており、Vue Webコンポーネントで作業しています。

異なるライブラリを必要とするローダーファイル（loader.js）を作成する必要があります。

require(‘.node_modules/…/…/library.js’);
require(‘.node_modules/…/…/script.js’);

このコマンドを使用して、Webコンポーネントをコンパイルします。

vue-cli-service build --target wc --name widget ./src/components/widget.vue

この時点で必要なのは、Webコンポーネントをビルドするときに、webpackがloader.jsファイルも処理し、すべてのrequireをdistフォルダー内にバンドルすることです。

私はwebpackを使って作業しているのですが、どうすれば解決できるのかわかりません。 CopyWebpackPluginを使用しようとしましたが、loader.jsファイルのみがコピーされ、requireファイルは含まれていません。

module.exports = {
plugins: [
  new CopyWebpackPlugin(
    [
      {
        from: 'src/loader.js',
        to: '.',
      },
    ],
  ),
],
}

どうすればこれを解決できますか？

vue.jswebpackvue-cli-3
5
sergimbo

静的jsファイルの場合は、パブリックフォルダーに追加できます

publicフォルダ

publicフォルダーに配置された静的アセットは単にコピーされ、webpackを経由しません。絶対パスを使用してそれらを参照する必要があります。

src： https://cli.vuejs.org/guide/html-and-static-assets.html#the-public-folder

依存関係がある場合、またはメインコードでインポートを使用すると、バンドルに含まれます。

1
Daniel