Typescript搭建开发环境

Posted 2020-12-20 double-w

 

为了方便后期使用，我们搭建一个基于Typescript的开发环境，后期的项目都可以基于此进行开发。

• 建立一个空的项目文件，使用npm init命令生成相应的json配置文件，（也可以使用npm init -y,使用默认配置)

  //注意事项：
  1、在输入了npm init内容后，我们需要填写配置项，其中
          entry point： ./src/index.ts
          keywords:typescript,source_code,lison
          license:MIT　　

• 创建项目文件目录

  demo2
  │  package.json  // 配置文件
  │  
  ├─build   // webpack打包文件和配置
  ├─src      //  项目代码文件
  │  ├─api
  │  ├─assets
  │  ├─config
  │  ├─tools
  │  └─utils
  └─typings  // ts文件集
  

   

•  安装ts：npm install typescript tslint -g, 然后使用ts初始化项目: tsc --init 命令会生成json文件

•  添加webpack配置，首先安装：cnpm install webpack webpack-cli webpack-dev-server -D
•  最后编写相应的webpack.json.js

  const htmlWebpackPlugin = require(‘html-webpack-plugin‘)
  const CleaWebpackPlugin = require(‘clean-webpack-plugin‘)
  
  module.exports = {
    entry: "./src/index.ts", // 入口点
    output: {
      filename: "main.js", // 编译后的输出文件, wepack自动引入main.js到index.html中
    },
    resolve: {
      extensions: [".js", ".ts", ".tsx"], // 自动加载文件后缀的文件
    },
    module: {
      rules: {
        test: /.tsx?$/,
        use: "ts-loader", // 将tsx的文件用ts-loader解析
        exclude: /node_modules/, // 忽略到nodemodules
      },
    },
    // NODE_ENV在package.json中传入，在其中使用corss-env 传递环境变量，使用dev-server启动服务（需要安装cnpm install cross-env -D
    devtool: process.env.NODE_ENV === "production" ? false : "inline-source-map", // 通过环境变量判断是否加载此选项
  
    devServer:{
        contentBase:‘./dist‘, // 启动目录
        stats:‘errors-only‘,  // 控制台只展示error信息
        compress:false,  // 是否压缩
        host:‘localhost‘,
        port:8089
    },
    plugins:[
        // 安装插件 cnpm install clean-webpack-plugin html-webpack-plugin -D
        new CleaWebpackPlugin ({
            cleanOnceBeforeBuildPatterns:[‘./dist‘]
        }),
        new HtmlWebpackPlugin({
            template:‘./src/template/index.html‘
        })
    ]
  };　　

• package.json文件配置项目启动文件

  {
    "name": "demo2",
    "version": "1.0.0",
    "description": "",
    "main": "./src/index.ts",
    "scripts": {
      "test": "echo "Error: no test specified" && exit 1",
      "start": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.js"
    },
    "keywords": [
      "typescript",
      "source_code",
      "lison"
    ],
    "author": "",
    "license": "MIT",
    "devDependencies": {
      "webpack": "^4.43.0",
      "webpack-cli": "^3.3.11",
      "webpack-dev-server": "^3.0.0"
    }
  }