TypeScript+Webpack+React 创建项目

mango1zp
326 阅读1分钟

1. 创建项目

npm init

2. 安装webpack依赖

npm i --save-dev webpack webpack-cli webpack-dev-server

安装css相关loader

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

webpack配置 创建webpack.config.js文件

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.tsx",
  mode: "development",
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  resolve: { extensions: ["*", ".js"] },
  output: {
    path: path.resolve(__dirname, "dist/"),
    publicPath: "/dist/",
    filename: "bundle.js"
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'public')
    },
    port: 3000,
    hot: true
  },
  plugins: [new webpack.HotModuleReplacementPlugin()]
};

3. 安装React

npm i --save-dev react react-dom webpack-dev-server

安装Babel编译jsx文件

npm i --save-dev babel-loader @babel/core @babel/cli @babel/preset-env @babel/preset-react

配置babel 创建babel配置文件 .babelrc

{
  "presets": ["@babel/env", "@babel/preset-react"]
}
修改webpack配配置，新增babel-loader
{
  test: /\.(js|jsx)$/,
  exclude: /(node_modules|bower_components)/,
  loader: "babel-loader",
  options: { presets: ["@babel/env"] }
},

修改webpack配配置，新增可解析文件类型

resolve: { extensions: ["*", ".js", ".jsx"] },

4. 安装TypeScript

npm i --save-dev typescript ts-loader @babel/preset-typescript

创建配置文件 tsconfig.js

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "skipLibCheck": true,
    "allowJs": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

配置webpack ts-loader

{
  test: /\.tsx?$/,
  use: ["babel-loader", "ts-loader"],
  exclude: /node_modules/,
}

修改webpack配配置，新增可解析文件类型

resolve: { extensions: ["*", ".js", ".jsx", ".tsx", ".ts"] },

修改babel配配置，转换ts

{
  "presets": ["@babel/env", "@babel/preset-react", "@babel/preset-typescript"]
}

5.创建模板文件

创建public文件、创建index.html

<!-- sourced from https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>

<body>
  <div id="root"></div>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>
  <script src="../dist/bundle.js"></script>
</body>
</html>

6.创建源代码目录src、创建index.tsx

import React from "react";
import ReactDOM from "react-dom";

class App extends Component {
  render() {
    return (
      <div>
        <h1> Hello, World! </h1>
      </div>
    )
  }
}

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

在package.json新增scripts

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve"
  },

至此，可以愉快的用TypeScipt+React+Webpack进行开发了。

npm start

就可以看到demo了。

avatar
文章
阅读
粉丝