React + Typescript + Webpack 開發環境配置

時間 2019-12-06

標籤 react typescript webpack 開發環境配置欄目 React 简体版

原文原文鏈接

對於複雜或多人開發的 React 項目來講，管理和使用每一個組件的 props 、 state 或許會成爲一件讓人頭痛的事情，而爲每個組件寫文檔，成本也會比較大，對項目的開發效率也不是最理想的。css

Typescript 給 React 帶來不少好處：html

在組件頭部定義 interface，讓每一個人在拿到組件的第一時間就能夠很明確知道該組件須要使用的 props 和 state；前端
在編譯中發現問題，減小運行時的報錯；react
能夠在編輯器中實現實時類型校驗、引用查詢；webpack
約束類型，在混合多語言環境中下降風險，等。git

且配置也是很是簡單，步驟以下。github

文件目錄

.
├── build # 前端配置文件
│   ├── index.html
│   ├── webpack.config.js
├── app # 前端目錄
├── .gitignore
├── package.json
├── tsconfig.json
└── tslint.json

配置流程

建立項目

mkdir my-project && cd my-project
npm init

安裝依賴

npm i -g webpack webpack-dev-server
npm i --save react react-dom @types/react @types/react-dom
npm i --save-dev ts-loader source-map-loader
npm link webpack webpack-dev-server typescript

配置 webpack

/* build/webpack.config.js */
const config = {
  entry: './app/index.tsx',
  output: {
    filename: 'app.bundle.js',
    path: './public',
    publicPath: '/assets'
  },
  devtool: 'source-map',
  resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
  },
  module: {
    loaders: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader'
      }
    ],
    preLoaders: [
      {
        test: /\.js$/,
        loader: 'source-map-loader'
      }
    ]
  },
  devtool: 'eval'
}

module.exports = config

配置 tsconfig

/* tsconfig.json */

{
    "compilerOptions": {
        "outDir": "./public/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react"
    },
    "files": [
        "./app/index.tsx"
    ]
}

至此，基本配置已經完成，後面建立好一個入口頁面和entry文件就能夠跑起來了：web

/* build/index.html */

<!doctype html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>Hello world</title>
    <script src="http://localhost:8080/webpack-dev-server.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script src="assets/app.bundle.js"></script>
  </body>
</html>

/* app/index.tsx */
import * as React from 'react'
import { render } from 'react-dom'

interface IAppProps {}
interface IAppState {}

class App extends React.Component<IAppProps, IAppState> {
  public render(): JSX.Element {
    return (
      <div>
        Hello world
      </div>
    )
  }
}

render(<App />, document.getElementById('app'))

啓動項目

webpack-dev-server --inline --config build/webpack.config.js --content-base build --open

出來吧神龍typescript

簡單的說明

Webpack 配置

Webpack配置實際上是一件很簡單的事情，這也是他具有強大競爭力的重要因素。
從配置文件中能夠看出，裏面無非就是entry、output和loader，若是須要編譯CSS，在loader裏面加一個便可：npm

npm i --save-dev style-loader css-loader

/* build/webpack.config.js */
const config = {
  // ...
  module: {
    loaders: [
      {
        test: /\.css/,
        loader: 'style-loader!css-loader'
      }
    ],
    // ...
  },
  // ...
}

項目啓動

項目啓動的命令過長，放進 package.json 的 scripts 就行了：

/* package.json */

{
  "scripts": {
    "dev": "webpack-dev-server --inline --config build/webpack.config.js --content-base build --open",
  },
}

再執行如下命令試試：

npm run dev

tslint

在開發中若是有個約束代碼的工具可以讓代碼更加優雅，之前用的是 eslint，若是用 .tsx 就不能生效了，這裏推薦使用 tslint ：

npm i -g tslint
cd my-project
tslint --init

這樣會在項目文件中建立一個現成的 tslint 配置文件： tslint.json ，個性化方案能夠自行設置。

參考

webpack 新官網
 webpack dev server
tsconfig.json 配置文檔
 style-loader
tslint

原文

原文地址：React + Typescript + Webpack 開發環境配置
文章做者：Heleth
版權聲明：自由轉載-非商用-非衍生-保持署名（創意共享3.0許可證）轉載請註明出處

相關標籤/搜索

react+typescript+webpack

webpack+react+typescript

react+webpack+typescript

typescript+webpack+react

webpack+typescript+react

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。