TypeScript项目打包疑问

Question

问题

首先描述一下问题：目前项目使用TypeScript，配置了tsconfig.json. 然后使用webpack + ts-loader来打包.

现在想问一下，tsconfig.json及ts-loader的作用是什么，是否需要加上babel-loader，希望熟悉构建工具的解释一下。

// tsconfig.json
{
    "compilerOptions": {
        "noImplicitAny": true,
        "target": "es5",
        "module": "commonjs",
        "outDir": "tsdist/",
        "sourceMap": true,
        "jsx": "react",
        "allowJs": true,
        "typeRoots": [
            "./node_modules/@types"
        ],
        "lib": [
            "es6",
            "dom",
            "scripthost"
        ]
    },
    "include": [
        "tslib/**/*",
        "tssrc/**/*"
    ]
}

Answer 1

已经打包为es5了就不需要babel-loader了

Answer 2

tsconfig.json 是一个配置文件,用来配置typescript的编译器如何工作
ts-loader 是一个webpack的loader,当webpack遇到.ts文件时会调用它来处理

ts-loader会调用typescript去编译.ts,typescript会读取tsconfig.json配置来决定如何编译

以上是大意，不完全准确，不过不要在意细节

最后，如果你不使用Stage 1/2的那些特性的话，应该不需要再加babel-loader了

Answer 3

loader也就是俗称的装载机，这个在webpack.config.js中肯定能看到哪里用了ts-loader，说明这个的作用也就再次，主要是解析ts|tsx（react）的文件

tsconfig.json是告诉你typescript使用怎么样的配置去解析和编译你的文件，也就是你的项目，因为你项目里面肯定打包了typescript这个包，那个它会自动在根目录下去寻找这个文件，然后按你的配置要求去编译。

babel-loader是在js上用的最多的，他在配置文件中一般的正则都是用来解析.js文件的，在根据你的.babelrc或者配置文件去解析你的js文件，以此来达到你配置的要求。

不知道你能否看懂，其实多看看多谢谢，逛逛这些问答就会懂了。