{"id":244,"date":"2024-12-20T07:46:31","date_gmt":"2024-12-20T07:46:31","guid":{"rendered":"https:\/\/www.yehger.com\/?p=244"},"modified":"2025-01-10T09:32:21","modified_gmt":"2025-01-10T09:32:21","slug":"react-%e4%bd%bf%e7%94%a8ts","status":"publish","type":"post","link":"https:\/\/www.yehger.com\/index.php\/2024\/12\/20\/react-%e4%bd%bf%e7%94%a8ts\/","title":{"rendered":"React \u4f7f\u7528ts"},"content":{"rendered":"<h1>\u5b89\u88c5ts<\/h1>\n<pre><code class=\"language-cmd\">npm i typescript ts-loader <\/code><\/pre>\n<h1>\u914d\u7f6etsconfig.json<\/h1>\n<pre><code class=\"language-json\">{\n  &quot;compilerOptions&quot;: {\n    &quot;outDir&quot;: &quot;.\/dist\/&quot;,\n    &quot;noImplicitAny&quot;: true,\n    &quot;module&quot;: &quot;es6&quot;,\n    &quot;target&quot;: &quot;es5&quot;,\n    &quot;jsx&quot;: &quot;react-jsx&quot;,\n    &quot;allowJs&quot;: true,\n    &quot;moduleResolution&quot;: &quot;node&quot;,\n    &quot;baseUrl&quot;: &quot;.\/&quot;, \/\/ \u8bbe\u7f6e\u9879\u76ee\u6839\u76ee\u5f55\u4e3a\u57fa\u7840\u8def\u5f84\n    &quot;paths&quot;: {\n      &quot;@\/*&quot;: [&quot;src\/*&quot;]\n    }\n  }\n}<\/code><\/pre>\n<pre><code class=\"language-js\">const path = require(&#039;path&#039;);\nconst HtmlWebpackPlugin = require(&quot;html-webpack-plugin&quot;);\nconst dirname = __dirname.replace(&#039;build&#039;,&#039;&#039;);\n\nmodule.exports = {\n    entry: path.resolve(dirname, &#039;src\/main.jsx&#039;),\n    output: {\n        filename: &#039;[name].[contenthash].js&#039;,\n        path: path.resolve(dirname, &#039;dist&#039;),\n        clean: true,\n        publicPath: &#039;\/&#039;\n    },\n    resolve: {\n        alias: {\n            &#039;@&#039;: path.join(dirname, &#039;src&#039;),\n        },\n        \/\/import\u540e\u7f00\u5f15\u7528\u7b80\u5199\n        extensions: [&#039;.tsx&#039;,&#039;.jsx&#039;,&#039;.ts&#039;,&#039;.js&#039;],\n    },\n    module: {\n        rules: [\n            {\n                test: \/\\.tsx?$\/,\n                use: &#039;ts-loader&#039;,\n                exclude: \/node_modules\/,\n            },\n            {\n                test: \/\\.jsx?$\/,\n                use: [\n                    {\n                        loader: &#039;babel-loader&#039;,\n                        options: {\n                            babelrc: false,\n                            presets: [\n                                [require.resolve(&#039;@babel\/preset-react&#039;), { runtime: &#039;automatic&#039; }],\n                                [require.resolve(&#039;@babel\/preset-env&#039;), { modules: false }],\n                            ]\n                        }\n                    }\n                ],\n                exclude: \/node_modules\/,\n            },\n            {\n                test: \/\\.(png|jpe?g|gif|mp3|svg)$\/,\n                type: &#039;asset\/resource&#039;\n            }\n\n        ],\n    },\n    plugins: [\n        new HtmlWebpackPlugin({\n            filename: &#039;index.html&#039;,\n            template: path.resolve(dirname, &#039;public\/index.html&#039;)\n        })\n    ]\n};\n<\/code><\/pre>\n<h1>\u89e3\u51b3\u62a5\u9519<\/h1>\n<p><img decoding=\"async\" src=\"https:\/\/www.yehger.com\/wp-content\/uploads\/2024\/12\/image-1734680778477.png\" alt=\"file\" \/><\/p>\n<pre><code>npm i @types\/react<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u5b89\u88c5ts npm i typescript ts-loader \u914d\u7f6etsconfig.json { &quot;compilerOptions&quot;: { &quot;outDir&quot;: &quot;.\/dist\/&quot;, &quot;noImplicitAny&quot;: true, &quot;module&quot;: &quot;es6&quot;, &quot;target&quot;: &quot;es5&quot;, &quot;jsx&quot;: &quot;react-jsx&quot;, &quot;allowJs&quot;:&#8230; <a class=\"read-more\" href=\"https:\/\/www.yehger.com\/index.php\/2024\/12\/20\/react-%e4%bd%bf%e7%94%a8ts\/\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-244","post","type-post","status-publish","format-standard","hentry","category-react-study"],"_links":{"self":[{"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/posts\/244","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/comments?post=244"}],"version-history":[{"count":5,"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/posts\/244\/revisions"}],"predecessor-version":[{"id":250,"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/posts\/244\/revisions\/250"}],"wp:attachment":[{"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/media?parent=244"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/categories?post=244"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/tags?post=244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}