diff --git a/.babelrc b/.babelrc index d8434e7..5c50eaf 100644 --- a/.babelrc +++ b/.babelrc @@ -1,10 +1,10 @@ { - "presets": ["@babel/preset-env", "@babel/preset-react"], + "presets": ["@babel/preset-env", "@babel/preset-react","@babel/preset-typescript"], "plugins": [ [ "@babel/plugin-transform-react-jsx", { - "runtime": "automatic" /* import React を自動化 */ + "runtime": "automatic" } ] ] diff --git a/package.json b/package.json index e116f8e..f956065 100644 --- a/package.json +++ b/package.json @@ -2,11 +2,14 @@ "name": "battle-vision", "version": "1.0.0", "description": "ポケモンのパーティ編成画面をブラウザで管理出来るツールです", - "main": "index.jsx", + "main": "test.tsx", "scripts": { - "build": "webpack --mode development", - "start": "webpack serve --mode development", - "build:pro": "webpack --mode production" + "build": "webpack --config ./webpack.config.dev.js", + "build:test": "webpack --config ./webpack.config.test.js", + "start": "webpack serve --config ./webpack.config.dev.js", + "start:test": "webpack serve --config ./webpack.config.test.js", + "build:pro": "webpack --mode production", + "tsc": "tsc" }, "author": "", "license": "ISC", @@ -20,20 +23,28 @@ "@babel/plugin-transform-react-jsx": "^7.22.3", "@babel/preset-env": "^7.22.4", "@babel/preset-react": "^7.22.3", + "@babel/preset-typescript": "^7.21.5", + "@types/lodash": "^4.14.195", + "@types/node": "^20.2.5", "babel-loader": "^9.1.2", "css-loader": "^6.8.1", "file-loader": "^6.2.0", "html-loader": "^4.2.0", "html-webpack-plugin": "^5.5.1", + "lodash": "^4.17.21", "mini-css-extract-plugin": "^2.7.6", "sass": "^1.62.1", "sass-loader": "^13.3.1", + "ts-loader": "^9.4.3", + "typescript": "^5.1.3", "url-loader": "^4.1.1", "webpack": "^5.85.0", "webpack-cli": "^5.1.1", "webpack-dev-server": "^4.15.0" }, "dependencies": { + "@types/react": "^18.2.9", + "@types/react-dom": "^18.2.4", "axios": "^1.4.0", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/src/frontend/js/components/App.jsx b/src/frontend/js/components/App.jsx deleted file mode 100644 index 0c4a99a..0000000 --- a/src/frontend/js/components/App.jsx +++ /dev/null @@ -1,13 +0,0 @@ -import Listget from "./Listget"; - -import { ENDPOINT_URL } from "../index"; - -const App = () => { - return ( - <> - - - ); -}; - -export default App; \ No newline at end of file diff --git a/src/frontend/js/components/Listget.jsx b/src/frontend/js/components/Listget.jsx deleted file mode 100644 index 4ab1575..0000000 --- a/src/frontend/js/components/Listget.jsx +++ /dev/null @@ -1,47 +0,0 @@ -import { useState , useEffect } from "react"; -import axios from 'axios'; - -import messages from '../../json/Message.json' - -const Listget = ({url}) => { - let fetched = false; - let [jsonfetchDatas,FetchResponse] = useState([]) - - useEffect(() => { - axios.get(url).then((res) => { - FetchResponse(res.data); - fetched = true; - }); - },[]); - - const Success = ({datas}) => { - return ( - - ); - }; - - return ( - <> - {!fetched &&
{messages.Server.BackendFetchError["01"]}
} - { fetched && } - - ); -}; - -export default Listget; \ No newline at end of file diff --git a/src/frontend/js/index.jsx b/src/frontend/js/index.jsx deleted file mode 100644 index 84ece6e..0000000 --- a/src/frontend/js/index.jsx +++ /dev/null @@ -1,13 +0,0 @@ -import { createRoot } from 'react-dom/client'; - -import App from "./components/App"; - -export const ENDPOINT_URL = 'http://localhost:8000/api/users/' - -const rootEl = document.querySelector("#root"); -const root = createRoot(rootEl); -root.render( - <> - - -); \ No newline at end of file diff --git a/src/frontend/js/sample.js b/src/frontend/js/sample.js deleted file mode 100644 index 2ec1908..0000000 --- a/src/frontend/js/sample.js +++ /dev/null @@ -1,8 +0,0 @@ -import "../scss/sample.scss"; -import "../css/sample.css"; - -import logo from "../images/logo.png"; - -const image = document.getElementById("img-test"); -// url-loader で path の文字列が取れている -image.src = logo; \ No newline at end of file diff --git a/src/frontend/ts/decs.d.ts b/src/frontend/ts/decs.d.ts new file mode 100644 index 0000000..e5c5d08 --- /dev/null +++ b/src/frontend/ts/decs.d.ts @@ -0,0 +1,3 @@ +declare module "react"; +declare module "react-dom"; +declare module "react/jsx-runtime" \ No newline at end of file diff --git a/src/frontend/ts/test.tsx b/src/frontend/ts/test.tsx new file mode 100644 index 0000000..2216eec --- /dev/null +++ b/src/frontend/ts/test.tsx @@ -0,0 +1,11 @@ +import * as _ from 'lodash'; + +function component() { + const element = document.createElement('div'); + + element.innerHTML = _.join(['Hello', 'webpack'], ' '); + console.log(element); + return element; +} + +document.body.appendChild(component()); \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..71b5f16 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,16 @@ +{ + "compilerOptions": { + "outDir": "./dist/", + "noImplicitAny": true, + "module": "es6", + "target": "es5", + "jsx": "react", + "allowJs": true, + "moduleResolution": "node", + "types": [ + "node" + ], + "allowSyntheticDefaultImports": true, + "esModuleInterop": true + } +} \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.dev.js similarity index 84% rename from webpack.config.js rename to webpack.config.dev.js index 3df4b5d..fee9b86 100644 --- a/webpack.config.js +++ b/webpack.config.dev.js @@ -8,7 +8,7 @@ const HTML_WEBPACK_PLUGIN = require('html-webpack-plugin'); const MINI_CSS_EXTRACT_PLUGIN = require('mini-css-extract-plugin'); module.exports = { - entry: './src/frontend/js/index.jsx', + entry: './src/frontend/ts/index.tsx', output: { // jsx は対応していない //filename: '[name]_[hash].js', @@ -21,9 +21,11 @@ module.exports = { { test: /\.js?x$/, exclude: /node_modules/, - use: { - loader: 'babel-loader' - } + loader: 'babel-loader' + }, + { + test: /\.ts?x$/, + use: 'ts-loader' }, { test: /\.html$/, @@ -48,7 +50,7 @@ module.exports = { ] }, resolve: { - extensions: [".js",".jsx"] + extensions: [".ts",".tsx",".js",".jsx",".json"] }, plugins: [ new HTML_WEBPACK_PLUGIN({ @@ -63,5 +65,7 @@ module.exports = { static: { directory: PATH.join(__dirname, DIST_PATH) } - } + }, + target: ["web", "es5"], + mode: "development" }; \ No newline at end of file diff --git a/webpack.config.test.js b/webpack.config.test.js new file mode 100644 index 0000000..0a57352 --- /dev/null +++ b/webpack.config.test.js @@ -0,0 +1,43 @@ +module.exports = { + // モード値を production に設定すると最適化された状態で、 + // development に設定するとソースマップ有効でJSファイルが出力される + mode: "development", + + // メインとなるJavaScriptファイル（エントリーポイント） + entry: { + main: { + import: './src/frontend/ts/test.tsx', + dependOn: 'shared' + }, + shared: ['lodash'] + }, + // ファイルの出力設定 + output: { + // 出力ファイルのディレクトリ名 + path: `${__dirname}/dist`, + // 出力ファイル名 + filename: "[name].js", + }, + module: { + rules: [ + { + // 拡張子 .ts もしくは .tsx の場合 + test: /\.tsx?$/, + // TypeScript をコンパイルする + use: "ts-loader", + exclude: /node_modules/ + }, + ], + }, + // import 文で .ts や .tsx ファイルを解決するため + resolve: { + extensions: [".ts", ".tsx", ".js", ".json"], + }, + // ES5(IE11等)向けの指定 + target: ["web", "es5"], + devServer: { + static: { + directory: `${__dirname}/dist` + } + }, +}; \ No newline at end of file