Q&A
前提・実現したいこと
htmlのscriptタグでライブラリを読み込む際、
通常のjsファイルで作られたライブラリだと、
インテリセンス(サジェスト?)が使えますよね。
これをwebpackのライブラリモード(configにlibraryを指定 *1)でエクスポートしたjsファイルで
行いたいです。
発生している問題・エラーメッセージ
通常のjsファイルではこのようにjsdocで記述した説明などが表示され、
インテリセンスが利用できますが、
ライブラリをwebpackのライブラリモードでエクスポートすると、
このようにインテリセンスが利用できません(anyになる)。
webpackのライブラリモードでインテリセンスを利用する方法などはありますか？
関数は正常に呼び出せています。
該当のソースコード
webpack側のファイル構造
│ package.json │ webpack.config.js │ ├─dist │ main.js (このファイルをwebpacked.jsにコピー＆ペースト) │ └─src index.js
webpackのentry(webpackのindex.js)
js
1/** 2 * Webpackのテスト 3 */ 4export function testwebpack(...args) { 5 console.log("testwebpackが実行されました。 引数:" + args.join(",")); 6}
webpack.config.jsファイル
js
1module.exports = { 2 // エントリーポイント 3 entry: `./src/index.js`, 4 // モード 5 mode: "development", 6 // 出力の設定 7 output: { 8 // 出力ディレクトリ名 9 path: `${__dirname}/dist`, 10 // 出力ファイル名 11 filename: "main.js", 12 //ここでlibraryを指定 *1 13 library: 'webpacked' 14 } 15};
html・通常jsファイルのファイル構造
index.html index.js jsconfig.json normal.js webpacked.js (ここにwebpackの出力ファイル(dist/main.js)の内容をコピー＆ペースト)
index.htmlファイル
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <title></title> 6 <meta charset="UTF-8"> 7</head> 8 9<body> 10 <script src="./normal.js"></script> 11 <script src="./webpacked.js"></script> 12 <script src="./index.js"></script> 13</body> 14 15</html>
index.jsファイル
js
1//通常のjsファイルの読み込みテスト 2testnormal("test", 1, 2, 3); 3//webpackで圧縮されたjsファイルの読み込みテスト 4webpacked.testwebpack("test", 1, 2, 3);
normal.jsファイル(通常のjsファイル)
js
1/** 2 * 通常のjsファイルのテスト 3 */ 4function testnormal(...args) { 5 console.log("testnormalが実行されました。 引数:" + args.join(",")); 6}
jsconfig.json
json
1{ 2 "compilerOptions": { 3 "module": "commonjs", 4 "target": "es6" 5 }, 6 "include": [ 7 "*" 8 ] 9}
試したこと
調べたところ、jsconfig.jsonを追加すると成功するらしいので
jsconfig.jsonを追加してみたが、意味はなかったみたいです。
webpackはevalを使用しているみたいで、それが影響してると考え
webpackのconfigにdevtool: falseを追加してみたが、
evalはなくなったがまだインテリセンスは利用できなかった。
バージョンなど
nodejs : v14.18.1
webpack: 5.69.1
webpack-cli: 4.9.2
vscode : 1.64.2
64bit
あなたの回答
tips
プレビュー
