はじめに
React をちょくちょく触っているんですが、理解できていない & 少し時間をかけてしまったことがあるので、記憶がてらまとめてみました。
React 外部ライブラリ読み込み方法
以下の1行です。
require('sample.js')
え、、・・・。requireってサーバーサイド（Nodejs）で実行する時にしか使えないという認識でした。
いろいろ調べてみたところ、以下のような記述を見つけました。
どの環境でも動作するようにするためには、
webpackなどのモジュールバンドルツールを利用する方法があります。
webpackというツールのイメージとしては、
・上記の書き方の例でいうmain.jsのような「読み込み側」のファイルを変換対象として指定する
・ツールを実行する
・ファイルに書かれているimportやrequireなどの文を解析してくれる
・必要な外部ファイル（モジュール）を取ってきて全部１つのファイルとしてまとめて出力する
ということができるものです。
なるほど、webpackで require も解析して1つの JavaScript ファイルとして出力してくれて、そのファイルをHTMLで読み取るから読み込めるんだ〜と納得しました。
まとめ
今日は軽めの記事でした〜。
まだまだ勉強不足なので、励みたいと思います。
ご指摘などがあればお願いします。。。
参考
- jsのimportとrequireの違い
会社紹介
株式会社 Mosaica
最先端テクノロジーで社会課題を解決し、持続可能な未来を創造する IT カンパニー。
AI ソリューション、クラウド統合、DX 推進、経営コンサルティングなど包括的なサービスでビジネス変革を支援しています。
詳しくは 公式サイト までお気軽にご相談ください。
公式サイト： https://mosaica.co.jp/