Typescript搭建开发环境

Posted double-w

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Typescript搭建开发环境相关的知识,希望对你有一定的参考价值。

 

为了方便后期使用,我们搭建一个基于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"
      }
    }
    

      

 

以上是关于Typescript搭建开发环境的主要内容,如果未能解决你的问题,请参考以下文章

typescript FirstOne 概论学习路线搭建 webstorm 开发环境预览

TypeScript01 编译环境的搭建字符串特性类型特性

谈一谈|搭建TS代码编译器环境

Typescript搭建开发环境

Typescript搭建开发环境

VScode搭建TypeScript开发环境