环境安装

  • npm install typescript -g //全局安装ts
  • npm init -y //初始默认npm的package.json配置
  • npm install -g tslint //全局安装tslint检查代码
  • tsc --init //初始化typescript,会生成tsconfig.json

目录结构

  • src：存放项目的开发资源，在 src 下创建如下文件夹：
    • utils：和业务相关的可复用方法
    • tools：和业务无关的纯工具函数
    • assets：图片字体等静态资源
    • api：可复用的接口请求方法
    • config：配置文件
  • typings：模块声明文件
  • build：webpack 构建配置

项目下也要安装typescript配合webpack进行编译和本地开发： npm install typescript

运行 tslint -i 生成tslint 配置文件

配置webpack

  • npm install webpack webpack-cli webpack-dev-server -D
  • npm install cross-env

在package.json下配置

{
  "scripts": {
    "start": "cross-env NODE_ENV=development webpack-dev-server --mode=development --config build/webpack.config.js" //开发环境
  }
}

在webpack.config.js下配置:

const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 
module.exports = {
  // 指定入口文件
  // 这里我们在src文件夹下创建一个index.ts
  entry: "./src/index.ts",
  // 指定输出文件名
  output: {
    filename: "main.js"
  },
  resolve: {
    // 自动解析一下拓展，当我们要引入src/index.ts的时候，只需要写src/index即可
    // 后面我们讲TS模块解析的时候，写src也可以
    extensions: [".tsx", ".ts", ".js"]
  },
  module: {
    // 配置以.ts/.tsx结尾的文件都用ts-loader解析
    // 这里我们用到ts-loader，所以要安装一下
    // npm install ts-loader -D
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /nodemodules/
      }
    ]
  },
  // 指定编译后是否生成source-map，这里判断如果是生产打包环境则不生产source-map
  devtool: process.env.NODEENV === "production" ? false : "inline-source-map",
  // 这里使用webpack-dev-server，进行本地开发调试
  devServer: {
    contentBase: "./dist",
    stats: "errors-only",
    compress: false,
    host: "localhost",
    port: 8089
  },
  // 这里用到两个插件，所以首先我们要记着安装
  // npm install html-webpack-plugin clean-webpack-plugin -D
  plugins: [
    // 这里在编译之前先删除dist文件夹
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: ["./dist"]
    }),
    // 这里我们指定编译需要用模板，模板文件是./src/template/index.html，所以接下来我们要创建一个index.html文件
    new HtmlWebpackPlugin({
      template: "./src/template/index.html"
    })
  ]
};

常见错误:

  • CleanWebpackPlugin is not a constructor: CleanWebpackPlugin 的导出有问题，可以看到 CleanWebpackPlugin 源文件是 export { CleanWebpackPlugin }，所以引入时也要 const { CleanWebpackPlugin } from ''
  • webpack Dev Server Invalid Options options should NOT have additional properties: config.devServer 配置出了问题，看下是不是变量名写错了等等

创建HTML 模板

  • 在webpack.config.js中已经配置过

new HtmlWebpackPlugin({
template: "./src/template/index.html" //在该目录下创建index.html
}) //所以打包后会根据这个html生成页面的入口

启动服务: npm run start

Compiled successfully. 即启动成功

可以访问localhost:xx 访问页面，因为是热更新，所以你可以在index.html添加一些内容可以看到重新编译成功，同时页面也发生了改动

添加打包配置

//在 package.json 的 scripts 里增加 build 指令：
{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "cross-env NODEENV=development webpack-dev-server --mode=development --config ./build/webpack.config.js",
    "build": "cross-env NODEENV=production webpack --mode=production --config ./build/webpack.config.js"
  }
}

打包

npm run build

如果打包成功，会在当前目录生成dist=>index.html&main.js

赏

爬。