手牵手系列之TypeScript开发环境搭建

新建项目

初始化

npm init

安装全局依赖

npm install typescript tslint -g

• 执行命令初始化，项目根目录生成tsconfig.json文件

tsc --init

• 引入webpack(版本4.0)

npm install webpack webpack-cli webpack-dev-server -D

• 根目录新建build文件夹，以及文件下webpack.config.js文件 ，用于webpack相关配置。

module.exports = {
  entry: './src/index.ts', // 入口文件
  output: {
    filename: 'main.js' // 编译完出口文件
  },
  resolve: {
    extensions: ['.js', '.ts', '.tsx'] // 文件后缀，自动解析文件拓展 示例：import xxx from './index.js 可以省略.js后缀 import xxx from './index'
  },
  module: {
    // 通过正则表达式配置不同文件处理，比如loader
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader'
      }
    ]
  }
}

下载ts-loader,用于解析ts。

npm install ts-loader -D