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"
  }
}

　　

 枚举类型

// 使用枚举类型可以为一组数值赋予友好的名字，如下的Red等均为键，默认的值从0开始
// 下面我们订初始值为1，依次累加
enum Color {Red=1, Green, Yellow}
let c: Color = Color.Green
console.log(c)  // 2

// 如果中间的值改变那？
enum Color2 {Red, Green, Yellow=12, Blue, Orange}
console.log(Color2.Green, Color2.Orange) // 1  14

// 枚举还提供了一个方法可以通过值来获取它的键
let colorName : string = Color[2]
console.log(colorName) // 'Green'

　　

 

查看更多关于Typescript搭建开发环境的详细内容...