環境
- MacOS Monterey V12.4
解決したいこと
npm run startを実行したらローカルWeb上にHello Worldを出したい。
困っていること
TypeScriptのnpmをrunするとTS18003エラーが発生しており下記後述の調査では解決ができない。
> y@1.0.0 start > webpack-cli serve --mode development <i> [webpack-dev-server] Project is running at: <i> [webpack-dev-server] Loopback: http://localhost:8080/ <i> [webpack-dev-server] On Your Network (IPv4): http://192.168.0.16:8080/ <i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:8080/ <i> [webpack-dev-server] Content not from webpack is served from '/Users/myPrd/IdeaProjects/ts-basic/dist' directory asset bundle.js 240 KiB [emitted] (name: bundle) runtime modules 27.3 KiB 12 modules modules by path ./node_modules/ 158 KiB modules by path ./node_modules/webpack-dev-server/client/ 53.5 KiB 12 modules modules by path ./node_modules/webpack/hot/*.js 4.3 KiB ./node_modules/webpack/hot/dev-server.js 1.59 KiB [built] [code generated] ./node_modules/webpack/hot/log.js 1.34 KiB [built] [code generated] + 2 modules modules by path ./node_modules/html-entities/lib/*.js 81.3 KiB ./node_modules/html-entities/lib/index.js 7.74 KiB [built] [code generated] ./node_modules/html-entities/lib/named-references.js 72.7 KiB [built] [code generated] + 2 modules ./node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated] ./node_modules/events/events.js 14.5 KiB [built] [code generated] ./src/index.ts 39 bytes [built] [code generated] [2 errors] ERROR in /Users/myPrd/IdeaProjects/ts-basic/tsconfig.json ./src/index.ts /Users/myPrd/IdeaProjects/ts-basic/tsconfig.json [tsl] ERROR TS18003: No inputs were found in config file 'tsconfig.json'. Specified 'include' paths were '["**/*"]' and 'exclude' paths were '["./"]'. ts-loader-default_e3b0c44298fc1c14 ERROR in ./src/index.ts Module build failed (from ./node_modules/ts-loader/index.js): Error: error while parsing tsconfig.json at Object.loader (/Users/myPrd/IdeaProjects/ts-basic/node_modules/ts-loader/dist/index.js:17:18) webpack 5.73.0 compiled with 2 errors in 721 ms
フォルダ構成
ts-basic L:dist L:node_modules(自動生成) L:src L:index.ts L:world.ts L:package-lock.json L:package.json L:tsconfig.json L:webpack.config.js
実施したこと
・Node環境を構築するため、Homebrew、nodebrewのインストール
・TypeScriptの環境を構築するため関連パッケージのインストール
npm install --save-dev typescript ts-loader webpack webpack-cli webpack-dev-server
・webpack.config.jsとtsconfig.jsonの作成と設定
・srcフォルダ配下にindex.tsとworld.tsを作成
・distフォルダ配下にindex.htmlを作成
エラー後確認したこと
・srcディレクトリファイルに正しくファイルが格納されていることを確認
→参考
・"preserveConstEnums": false, のfalseの後の , を削除する
→元からコメントアウト済
・tsconfigがあるプロジェクト内に.tsファイルがないとエラーが出るとのことなので試しに同一フォルダにindex.tsをダミーで作成するもエラーは変わらず。
→参考
tsconfig.json
json
1{ 2 "compilerOptions": { 3 /* Visit https://aka.ms/tsconfig to read more about this file */ 4 5 /* Projects */ 6 // "incremental": true, 7 // "composite": true, 8 // "tsBuildInfoFile": "./.tsbuildinfo", 9 // "disableSourceOfProjectReferenceRedirect": true, 10 // "disableSolutionSearching": true, 11 // "disableReferencedProjectLoad": true, 12 13 /* Language and Environment */ 14 "target": "es5", 15 // "lib": [], 16 // "jsx": "preserve", 17 // "experimentalDecorators": true, 18 // "emitDecoratorMetadata": true, 19 // "jsxFactory": "", 20 // "jsxFragmentFactory": "", 21 // "jsxImportSource": "", 22 // "reactNamespace": "", 23 // "noLib": true, 24 // "useDefineForClassFields": true, 25 // "moduleDetection": "auto", 26 27 /* Modules */ 28 "module": "commonjs", 29 // "rootDir": "./", 30 // "moduleResolution": "node", 31 "baseUrl": "./", 32 // "paths": {}, 33 // "rootDirs": [], 34 // "typeRoots": [], 35 // "types": [], 36 // "allowUmdGlobalAccess": true, 37 // "moduleSuffixes": [], 38 // "resolveJsonModule": true, 39 // "noResolve": true, 40 41 /* JavaScript Support */ 42 "allowJs": true, 43 // "checkJs": true, 44 // "maxNodeModuleJsDepth": 1, 45 46 /* Emit */ 47 // "declaration": true, 48 // "declarationMap": true, 49 // "emitDeclarationOnly": true, 50 // "sourceMap": true, 51 // "outFile": "./", 52 "outDir": "./", 53 // "removeComments": true, 54 // "noEmit": true, 55 // "importHelpers": true, 56 // "importsNotUsedAsValues": "remove", 57 // "downlevelIteration": true, 58 // "sourceRoot": "", 59 // "mapRoot": "", 60 // "inlineSourceMap": true, 61 // "inlineSources": true, 62 // "emitBOM": true, 63 // "newLine": "crlf", 64 // "stripInternal": true, 65 // "noEmitHelpers": true, 66 // "noEmitOnError": true, 67 // "preserveConstEnums": true, 68 // "declarationDir": "./", 69 // "preserveValueImports": true, 70 71 /* Interop Constraints */ 72 // "isolatedModules": true, 73 // "allowSyntheticDefaultImports": true, 74 "esModuleInterop": true, 75 // "preserveSymlinks": true, 76 "forceConsistentCasingInFileNames": true, 77 78 /* Type Checking */ 79 "strict": true, 80 // "noImplicitAny": true, 81 // "strictNullChecks": true, 82 // "strictFunctionTypes": true, 83 // "strictBindCallApply": true, 84 // "strictPropertyInitialization": true, 85 // "noImplicitThis": true, 86 // "useUnknownInCatchVariables": true, 87 // "alwaysStrict": true, 88 // "noUnusedLocals": true, 89 // "noUnusedParameters": true, 90 // "exactOptionalPropertyTypes": true, 91 // "noImplicitReturns": true, 92 // "noFallthroughCasesInSwitch": true, 93 // "noUncheckedIndexedAccess": true, 94 // "noImplicitOverride": true, 95 // "noPropertyAccessFromIndexSignature": true, 96 // "allowUnusedLabels": true, 97 // "allowUnreachableCode": true, 98 99 /* Completeness */ 100 // "skipDefaultLibCheck": true, 101 "skipLibCheck": true 102 } 103}
package.json
json
1{ 2 "name": "y", 3 "version": "1.0.0", 4 "description": "", 5 "main": "index.js", 6 "scripts": { 7 "build": "webpack --mode=production", 8 "start": "webpack-cli serve --mode development" 9 }, 10 "author": "", 11 "license": "ISC", 12 "devDependencies": { 13 "ts-loader": "^9.3.1", 14 "typescript": "^4.7.4", 15 "webpack": "^5.73.0", 16 "webpack-cli": "^4.10.0", 17 "webpack-dev-server": "^4.9.2" 18 } 19}
webpack.js
js
1const path = require('path'); 2module.exports = { 3 // モジュールバンドルを行う起点となるファイルの指定 4 // 指定できる値としては、ファイル名の文字列や、それを並べた配列やオブジェクト 5 // 下記はオブジェクトとして指定した例 6 entry: { 7 bundle: './src/index.ts' 8 }, 9 // モジュールバンドルを行った結果を出力する場所やファイル名の指定 10 output: { 11 path: path.join(__dirname, 'dist'), // "__dirname"はファイルが存在するディレクトリ 12 filename: '[name].js' // [name]はentryで記述した名前(この設定ならbundle) 13 }, 14 // import文でファイル拡張子を書かずに名前解決するための設定 15 // 例...「import World from './world'」と記述すると"world.ts"という名前のファイルをモジュールとして探す 16 resolve: { 17 extensions:['.ts','.js'] // Reactの.tsxや.jsxの拡張子も扱いたい場合は配列内に追加する 18 }, 19 devServer: { 20 //contentBase: path.join(__dirname, 'dist'), // webpack-dev-serverの公開フォルダ 21 // ↑現在「contentBase」の使用は不可になっており、代わりにstaticを使って記述することになっている。 22 static:{ 23 directory: path.join(__dirname, 'dist'), 24 //open: true // サーバー起動時にブラウザを開く 25 } 26 }, 27 // モジュールに適用するルールの設定(ローダーの設定を行う事が多い) 28 module: { 29 rules: [ 30 { 31 // 拡張子が.tsのファイルに対してTypeScriptコンパイラを適用する 32 // Reactで用いる.tsxの拡張子にも適用する場合は test:/\.(ts|tsx)$/, 33 test: /\.ts$/, 34 loader: 'ts-loader' 35 } 36 ] 37 } 38}
追記 6/26
index.ts
typescript
1import World from './world'; 2 3const root: HTMLElement | null = document.getElementById("root") 4const world = new World("Hello World!!!"); 5world.sayHello(root);
world.ts
typescript
1export default class World { 2 // クラスで使うプロパティ 3 message: string; 4 5 // コンストラクタ(初期化) 6 constructor(message: string) { 7 this.message = message 8 } 9 10 // 外部から呼び出せるメソッドを定義 11 public sayHello(elem: HTMLElement | null) { 12 if (elem) { 13 elem.innerText = this.message 14 } 15 } 16}
回答1件