Webpack を使わずに React ＋ Typescript する [編集]

thumb

2020/07/24
カテゴリ: JavaScript | タグ: React 覚書

Create React App をするほど大げさじゃなく、軽い感覚で何かを作るとき、
React を TypeScript で書くとき、毎回 Webpack を繋ぐのが面倒くさいので
React + TypeScript オンリーで書く一番簡単な方法を調べた

ディレクトリ構成

.
├─index.html
├─package.json
├─tsconfig.json
└─src/
  ├─App.tsx
  └─index.tsx

index.html

この方法では、React を CDN から取ってくる。
あとで使うので、CDN で読み込む React のバージョンを控えておく
- このコードで言う 16.13.1

<!DOCTYPE html>
  <html>
    <script
      src="https://unpkg.com/react@16.13.1/umd/react.development.js"
      type="text/javascript"
    ></script>
    <script
      src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"
      type="text/javascript"
    ></script>
  </head>
  <body>
    <div id="app" />
    <script src="./dist/bundle.js"></script>
  </body>
</html>

package.json

npm i -D react react-dom @types/react @types/react-dom typescript
さっき index.html で控えた react, react-dom のバージョンを同じにして、再度 npm i
@types のバージョンは、本体のバージョンと同値またはそれ以下で、最新のものであればいい

{
  "scripts": {
    "dev": "tsc -w"
  },
  "devDependencies": {
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "@types/react": "^16.9.43",
    "@types/react-dom": "^16.9.8",
    "typescript": "^3.9.7"
  }
}

tsconfig.json

適宜、好きなものを追加する。

{
  "compilerOptions": {
    "jsx": "react",
    "moduleResolution": "node",
    "target": "ES6",
    "lib": ["ES2015", "DOM", "DOM.Iterable"],
    "outFile": "dist/bundle.js"
  }
}

src/App.tsx

export は使わない。

const App = () => <h1>Hello!</h1>;

src/index.tsx

import は使わず、reference を使う

/// <reference path="App.tsx" />

ReactDOM.render(<App />, document.getElementById("app"));

あとはこれで、npm run dev すれば、dist/bundle.js に React が動く JavaScript が出力される。

VSCode 拡張の Live Server を使えば、ホットリロードもあるし快適に開発を始められる。

この方法の致命的なデメリット

めっちゃグローバル汚染する

それもそのはず。
この方法では、あくまですべての TypeScript コードを 1 つに繋げているだけなので、
コンポーネントが増えれば増えるほど、その分グローバル変数がどんどん増えていく。

あかんね、これは・・・

突貫工事でグローバル汚染を抑制する

一応 index.html をこうすればグローバル汚染を抑えられる。
ソースマップ？しらんがな

    <body>
      <div id="app" />
-     <script src="./dist/bundle.js"></script>
+     <script>
+       fetch("./dist/bundle.js")
+         .then(res => res.text())
+         .then(code => eval(`(function(){${code}})()`))
+     </script>
    </body>
  </html>

とりま、スケッチ程度に React 書くならこれでいいかもね。

参考にした記事

Getting Started with React and TypeScript | Pluralsight

This will generate a fully-functional React app with many common features built-in like Babel, Webpack, Jest, and ... On the other hand, when starting from scratch, it's possible to use React and TypeScript together without any ...

見に行く

TOP | ブログ一覧へ