TypeScript 使用Webpack搭建环境[转]

TypeScript 使用Webpack搭建环境[转]

• 原文：TypeScript(二)使用Webpack搭建环境

TypeScript项目环境的基础配置

1. 创建一个简单的项目目录结构

• 新建一个新的目录：TsDemo，并且创建如下的目录结构

│  index.html
├─build
│      webpack.config.js
└─src
        main.ts

目录和文件夹结构分析:

• index.html是跑在浏览器上的模块文件

• build文件夹中用于存放webpack的配置信息

• src用于存放我们之后编写的所有TypeScript代码

2. 使用npm管理项目的依赖

• webpack本身需要有很多的依赖，并且之后我们也需要启动node服务来快速浏览index.html模板以及编译后的JavaScript代码。
• 我们要使用npm来初始化package.json文件：

npm init -y

3. 本地依赖TypeScript

• 为什么需要本地依赖TypeScript：

  • 因为我们之后是通过webpack进行编译我们的TypeScript代码的，并不是通过tsc来完成的。（tsc使用的是全局安装的TypeScript依赖）

  • 那么webpack会在本地去查找TypeScript的依赖，所以我们是需要本地依赖TypeScript的；

• 安装本地TypeScript依赖

npm install typescript

4. 初始化tsconfig.json文件

• 在进行TypeScript开发时，我们会针对TypeScript进行相关的配置，而这些配置信息是存放在一个tsconfig.json文件中的
• 我们并不需要手动去创建它，可以通过命令行直接来生成这样的一个文件

tsc --init

5. 配置tslint来约束代码

• 为了让大家按照严格的TypeScript风格学习代码，这里我希望大家可以加入tslint
• 全局安装tslint：

npm install tslint -g

• 在项目中初始化tslint的配置文件：tslint.json

tslint -i

项目环境的Webpack

1. 安装webpack相关的依赖

• 使用webpack开发和打开，需要依赖webpack、webpack-cli、webpack-dev-server

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

2. 在package.json中添加启动命令

• 为了方便启动webpack，我们在package.json中添加如下启动命令

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "serve": "cross-env NODE_ENV=development webpack-dev-server --mode=development --config build/webpack.config.js"
},

3. 添加webpack的其他相关依赖

• 依赖一：cross-env
  • 这里我们用到一个插件 "cross-env" ，这个插件的作用是可以在webpack.config.js中通过 process.env.NODE_ENV 来获取当前是开发还是生产环境，我们需要这个插件：

npm install cross-env -D

• 依赖二：ts-loader
  • 因为我们需要解析.ts文件，所以需要依赖对应的loader：ts-loader

npm install ts-loader -D

• 依赖三：html-webpack-plugin
  • 编译后的代码需要对应的html模块作为它的运行环境，所以我们需要使用html-webpack-plugin来将它插入到对应的模板中：

npm install html-webpack-plugin -D

4. 配置webpack.config.js文件

• 将如下配置到webpack.config.js文件中：

  • 这里不再给出详细的说明信息，webpack后面我可能会再开一个专栏来讲解

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require('path');

module.exports = {
    entry: "./src/main.ts",
    output: {
        filename: "build.js"
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"]
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: "ts-loader",
                exclude: /node_modules/
            }
        ]
    },
    devtool: process.env.NODE_ENV === "production" ? false : "inline-source-map",
    devServer: {
        static: {
            directory: path.join(__dirname, 'public'),
        },
        compress: true,
        port: 9000,
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./index.html"
        })
    ]
};

 项目环境下代码测试

• 下面我们就可以愉快的在main.ts中编写代码，之后只需要启动服务即可：

•  在终端中启动服务：

npm run serve

• index.html

在浏览器中打开：http://localhost:9000/