Vue 3 でコンポーネント ライブラリをバンドルする (しない) 方法

壊れた開発者の日記: エントリ #1

こんにちは、これは私の最初の公式投稿ですが、これ以上の自己紹介は拒否します.今日のトピックは、私の現在の仕事での過去 3 日間を理解し、(できれば) 彼らが私にお金を払っている理由を正当化することです.

isCE: セマンティック変数宣言に準拠していないブール値ではない

物語は重要ではありません.重要なのは、私たちのカスタム コンポーネント ライブラリがうまくプレイすることを拒否していたことです.構成に関係なく、ビルドして他のプロジェクトにインポートしようとした後、次のエラーが発生しました.

Uncaught TypeError: Cannot read properties of null (reading 'isCE')

まあ、それは壮大ではありませんか?可能性のある leads をグーグル検索しても、どこにもすぐにはつながりませんでした.私たちは、マストのない広大な外海でほとんど一人でいました.

すべてのビルド構成が同じように作成されるわけではありません

Vue CLI のドキュメントを熟読すると、あいまいな言葉遣いのステートメントにたどり着きました.

Note on Vue Dependency

In lib mode, Vue is externalized. This means the bundle will not bundle Vue even if your code imports Vue. If the lib is used via a bundler, it will attempt to load Vue as a dependency through the bundler; otherwise, it falls back to a global Vue variable.

To avoid this behavior provide --inline-vue flag to build command.

他の有能な個人と同様に、私は当然のことを行いました.言語学者であり、プログラミングのバックグラウンドを持つ兄に連絡することです.彼は、声明が実際にはあいまいな表現であることを確認した.彼は非規範主義者であるため、文脈の重要性と言語の民主化について説明を続けました.これにより、以前の 48 時間よりもはるかに解決策に近づきました.

理にかなっていても動かないなら、あなたはプログラマーです

私は実際に --inline-vue フラグを削除し、vue.config.js ファイルを作成し、以下を追加しました.

configureWebpack: {
  output: {
    libraryExport: "default",
  },
}

これは何をしますか?私が知っているならファック.この時点で、私はあまり気にしませんでした.その後、ホスト プロジェクトで別の vue.config.js ファイルを作成し、いくつかをコード化しました.

module.exports = {
  chainWebpack(config) {
    config.resolve.alias.set("vue", 
    path.resolve("./node_modules/vue"));
  },
};

幸いなことに、私は実際にこれが何をするかを知っています.これは何か-何かが二重の Vue インポートを防ぎます.

要点と教訓

経営陣がこの devlog を見て私を解雇しないことを願っています.そうすれば、農場を購入するのに十分なお金を貯めて、生計を立てるために自分でこれを行うのをやめるかもしれません.