【譯】使用 React，TypeScript 和 Webpack 開始一個項目

原文： Getting Started with React TypeScript and Webpack
做者：Grant
譯者：博軒

我會經過這篇文章，爲你們講述，如何使用 React，TypeScript 和 Webpack 來構建一個項目。

開始

這是一篇關於如何使用 React，TypeScript 和 Webpack 來構建一個很是基礎的項目的教程。您能夠繼續閱讀，或者直接在 github 上面查看示例代碼。

譯註： create-react-app 已經提供了關於 TypeScript 開箱即用的支持，也可使用 react-scripts 或者 react-app-rewired 完成對於 Webpack 配置的擴展。本文也只是聊一聊如何從 0 構建一個項目，你們瞭解一下就好 🤣

設置項目

• 爲你的項目建立一個文件夾

mkdir your-folder-name && cd your-folder-name && npm init --yes

• 爲項目安裝 React 和 React-DOM 的依賴

npm install react && npm install react-dom

• 根據咱們的項目配置需求，咱們須要 TypeScript

npm install typescript --save-dev

• 安裝 React 和 React-DOM 的類型

npm install @types/react --save-dev && npm install @types/react-dom --save-dev

• 接下來，咱們能夠初始化咱們的 TypeScript 項目。您應該 tsconfig.json 文件被建立。

tsc --init

• 打開 tsconfig.json，以後添加一個 include
  數組 compilerOptions 。這將告訴 TypeScript 在哪找到咱們的代碼。

{
    "compilerOptions": {
    },
    "include":[ 
        "./src/**/*"
    ]
}

• 如今建立一個 src 文件夾，並在裏面建立一個 App.ts 文件。

export class App
{
    constructor()
    {
        console.log("Hello app!");
    }
}

• 測試 TypeScript 是經過 tsc 命令在終端中運行編譯。若是成功，您應該看到 src 文件夾下面出現 App.js 的文件。完成後，咱們刪除 .js 文件，繼續後續操做。

讓 TypeScript 和 React 一塊兒工做

如今，讓咱們看看 TypeScript 是否能夠編譯 React 文件。

• 讓咱們更新 tsconfig.json 文件，內容以下。

{
    "compilerOptions": {
        "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
        "lib": ["es5", "es6", "dom"], /* Specify library files to be included in the compilation. */
        "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
        "jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
        "sourceMap": true, /* Generates corresponding '.map' file. */
        "outDir": "./dist/", /* Redirect output structure to the directory. */
        "removeComments": true, /* Do not emit comments to output. */
        "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
        "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
        "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
        "preserveConstEnums": true
    },
    "include": [
        "./src/**/*"
    ]
}

• 爲了測試 TypeScript 是否能夠轉換 React 文件，咱們將在 src 文件夾中添加一個新文件 Main.tsx 。

import * as React from 'react';
import { App } from './App';

export interface IMainProps
{
    app: App;
}

export class Main extends React.Component<IMainProps, {}>
{
    public render(): JSX.Element
    {
        return (
            <>
                <h1>Hello main</h1>
            </>
        );
    }
}

• 在終端運行 tsc ，您如今應該看到生成了一個 dist文件夾，切該目錄下有一個 Main.js 文件，這意味着 TypeScript 如今也能夠處理 React TypeScript 文件！（.tsx）

整合 Webpack

如今，咱們須要將 TypeScript 和 React 結合在一塊兒開發。接下來，咱們會使用 Webpack 進行打包，並在瀏覽器中提供服務。

首先，咱們按照Webpack 官方文檔 在本地安裝 Webpack 。

• 在終端運行如下命令

npm install webpack --save-dev && 
npm install webpack-cli --save-dev && 
npm install webpack-dev-server --save-dev && 
npm install awesome-typescript-loader --save-dev && 
npm install html-webpack-plugin --save-dev

• 如今，除了 Webpack ，咱們還安裝了另外4個開發依賴。

  • Webpack-cli - 在終端提供有用的 Webpack 命令。
  • Webpack dev server - 爲咱們的應用提供服務端的支持，若是咱們修改代碼，能夠幫咱們刷新瀏覽器的頁面。
  • Awesome Typescript Loader - 使用 tsconfig.json 幫助 Webpack 編譯咱們的 TypeScript 代碼。
  • HTML Webpack Plugin - 簡化HTML文件的建立，爲 Webpack 提供打包服務。
• 讓咱們在根目錄建立 webpack.config.js 文件。

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        app: ['./src/App.ts'],
        vendor: ['react', 'react-dom']
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].bundle.js'
    },
    devtool: "source-map",
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".jsx", ".json"]
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: "awesome-typescript-loader"
            }
        ]
    },

    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.html"
        })
    ]
};

代碼解析

• 咱們的入口對象 entry 包含 App.ts 的文件路徑。
• 入口對象 entry 還包含 verder 數組，React 和 React-Dom 是咱們惟一的庫，因此咱們在這裏添加它們。若是要添加其餘庫，則應將其添加到此，以便 Webpack 瞭解項目中所須要的依賴。
• output 對象告訴 webpack 在哪裏打包咱們的應用程序，當前的例子是在 dist 文件夾裏面。
• 在 module 下咱們添加了 awesome-type-script-loader。
• 在 plugins 數組下，咱們使用 HtmlWebPackPlugin 添加了 index.html 源文件。壓縮後的 html 文件將放在咱們的 dist 文件夾中，同時引用咱們打包後的js文件。

接下來，新建立一個 index.html 文件並將其添加到咱們的src文件夾中。並確保<div id="app"></div>已被添加在 index.html 文件中。這是咱們的React應用程序將要渲染的位置。

• 打開 App.ts 並在文件的最底部添加 new App() ;

export class App
{
    constructor()
    {
        console.log("Hello app!");
    }
}

new App();

• 如今，使用終端，在項目的根目錄下，運行：

node_modules/.bin/webpack-dev-server  --mode development

• 你如今應該會有一個成功的構建，並在 http://localhost:8080/ 能夠看到 Web 服務已經啓動。
• 檢查開發控制檯，您還應該在控制檯中看到咱們的日誌：「Hello app！」

使用更多的 React

如今咱們已經完成了React，TypeScript 和 Webpack的組合，讓咱們看一個更加實用一些的 React 示例。

• 建立一個 Main.tsx 文件：

import * as React from 'react';
import { App } from './App';

export interface IMainProps
{
    app: App; // Reference to our App.ts class
}

export class Main extends React.Component<IMainProps, {}>
{
    constructor(props: IMainProps)
    {
        super(props);
    }

    public render(): JSX.Element
    {
        return (
            <>
                Main app
            </>
        );
    }
}

• 打開 App.ts 文件，並粘貼以下內容：

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { Main } from './Main';

export class App
{
    constructor()
    {
        this.render();
    }

    private render(): void
    {
        ReactDOM.render(React.createElement(Main, { app: this }), document.getElementById("app"));
    }
}

new App();

代碼解析

• 使用 Main.tsx 類做爲渲染的 React UI 的入口。
• 咱們將對App類的引用做爲 props 傳遞。可能會在之後的App類中執行或訪問這些內容。
• 經過 app id 屬性定位 index.html 文件。這也將是React呈現的位置。

如今，若是咱們回到瀏覽器，咱們應該在頁面上看到 「Main app」。當咱們更改了一些代碼，您的瀏覽器應該已經自動從新加載。如今 React 已經出如今咱們的網頁中了。

整合發佈

使用 ./node_modules/.bin/webpack-dev-server --mode development 運行項目不是那麼友好。咱們可使用更加便捷的 node 命令。

修改 package.json 以下：

{
    "scripts": {
        "dev": "webpack-dev-server --mode development",
        "build": "webpack --mode production"
    }
}

咱們如今能夠在終端上運行上面的命令：

• npm run dev 就是咱們以前輸入的內容：./node_modules/.bin/webpack-dev-server --mode development
• npm run build 將告訴 webpack 編譯咱們的應用程序用於生產。它將壓縮並打包全部內容到咱們的 dist 文件夾中，準備上傳到網絡。

本文已經聯繫原文做者，並受權翻譯，轉載請保留原文連接