如何快速构建 typescript 项目 #7

本文为 typescript 系列文章的 第一篇。主要记录如何创建一个 typescript

项目类型分类

我个人认为现代js应用里，lint 的重要性一定是排到第一位的。从长远来看，应用规模的扩大和复杂度的提升会造成开发和维护成本急剧上升，这是软件工程学早就得出的结论。从技术角度来谈，而lint，可以延缓项目的衰败程度。（从产品角度来谈，一个项目有没有价值才是最重要的，如果有很大价值，推倒重构也是值得的）

JavaScript 代码检验工具 ESLint 在 TypeScript 团队发布全面采用 ESLint 之后，发布 typescript-eslint 项目，以集中解决 TypeScript 和 ESLint 兼容性问题。而 ESLint 团队将不再维护 typescript-eslint-parser，也不会在 Npm 上发布，TypeScript 解析器转移至Github 的 typescript-eslint/parser。

** 结论就是以后都用 eslint 吧，别用tslint **

对于 react 项目而言，推荐等待即将发布的 create-react-app version 3，version 3 的typescript 模板会从 tslint 改为 eslint 。所以，如果是个人项目，建议等待一下

对于 vue 项目，建议等待 version 3，version 2 版本的 vue 以及 vue 生态链对于 typescript 实在是一言难进。强上 typescript 的意义不大

除了应用程序外，我推荐使用 typescript 更多是 JavaScript library。以下将从如何构建一个基于 typescript 的 JavaScript library

1、 建立项目目录、初始化 npm

mkdir my-lib && cd my-ilb
npm init

2、 安装typescript

npm install -g typescript
npm install --save typescript
tsc --init

在根目录的 tsconfig 中修改其中的 compilerOptions 选项

"outDir": "./dist",
"rootDir": "./src",
"target": "esnext",
"module": "esnext",
"sourceMap": true,

3、 安装eslint

npm install --save-dev  eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin 

根目录新增一个 .eslintrc.js 文件

module.exports = {
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],
  "extends": [
    "plugin:@typescript-eslint/recommended",
  ],
  // https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/parser/README.md
  "parserOptions": {

  },
  "rules": {
    "indent": "off",
    "@typescript-eslint/indent": ["error", 2],
    "semi": ["error", "never"],
  }
};

4、 安装 webpack

npm install --save-dev webpack webpack-cli ts-loader

在根目录创建 build 文件用于 webpack配置

mkdir build

在build目录下创建 webpack.config.js, webpack 的配置文件，就是一个导出 webpack 配置对象 的 JavaScript 文件。

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

一般来说，我会在build 目录内使用三个配置文件
common.config.js、dev.config.js、build.config.js

因为 development(开发环境) 和 production(生产环境) 这两个环境下的构建目标存在着巨大差异。在开发环境中，我们需要：强大的 source map 和一个有着 live reloading(实时重新加载) 或 hot module replacement(热模块替换) 能力的 localhost server。而生产环境目标则转移至其他方面，关注点在于压缩 bundle、更轻量的 source map、资源优化等，通过这些优化方式改善加载时间。由于要遵循逻辑分离，我通常建议为每个环境编写彼此独立的 webpack 配置。

虽然，以上将生产环境和开发环境做了略微区分，但是，请注意，最好还是遵循不重复原则(Don't repeat yourself - DRY)，保留一个 "common(通用)" 配置。为了将这些配置合并在一起，可以使用一个名为 webpack-merge 的工具。此工具会引用 "common" 配置，因此不必再在环境特定(environment-specific)的配置中编写重复代码。

以上 webpack 配置将会在 webpack 相关文章中详解

5、 配置开发工具

我用的是 vscode， 相关的配置也非常简单，安装 vscode 的 eslint 插件
然后配置以下

"eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        {
            "language": "vue",
            "autoFix": true
        },
        "typescript",
        "typescriptreact"
    ],

结尾

开工