TypeScript编译选项+webpack打包

tsc指令

1. tsc 文件名 来编译指定的ts文件
2. tsc 文件名 -w 自动编译（监视模式）
3. tsc 编译所有文件（必须要有tsconfig.json配置文件）

tsconfig.json配置文件

include 指定文件被编译

**代表任意目录 *代表任意文件

exclude 指定文件不被编译

默认：node_modules bower_components,jspm_packages文件不被编译

extends 定义被继承的配置文件

files 指定被编译的文件列表，建议编译文件少时使用

默认：node_modules bower_components,jspm_packages文件不被编译

compileroptions

• target 指定ts被编译为js的ES版本（es5、es6、ESNext最新版本ES）
• module 指定要使用的模块化规范 （commonjs、es6）
• lib 项目中使用的库（一般不设置）
• outDir 编译后文件所在目录 （一般在dist目录下）
• outFile 将编译后代码合并为一个文件（模块化合并需要module设置为system）
• allowJs 是否对js文件进行编译
• checkJS 是否检查js代码是否符合语法规范
• removeComments 是否移除注释
• noEmit 不生成编译后的文件
• onEmitonError 当代码有错误时，不生成编译文件
• alwaysStrict 编译后文件是否使用严格模式(js文件中 'use strict'可以开启严格模式)
• noImplicitAny 是否允许隐式any类型
• noImplicitThis 是否允许不明确类型的this
• strictNullChecks 是否严格的检查空值（?判断是否为null）
• strict 所有严格检查的总开关（建议为true）

使用webpack打包ts代码(基础版)

1. npm init -y 生成package.json文件
2. npm i -D webpack webpack-cli typescript ts-loader 下载开发依赖
3. 新建webpack配置文件 webpack.config.js
4. npm i -D html-webpack-plugin (自动生成html文件的插件)
5. npm i -D webpack-dev-serve(在package.json文件中配置 'start' : webpack serve--open chrome.exe)使用chrome浏览器打开
6. npm i -D @babel/core @babel/preset-env babel-loader core-js

配置信息

const path= require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: //入口文件（一般是src下的文件），
    output: {// 打包文件所在的目录
        path: path.resolve(__dirname,'dist'),
        filename:'bundle.js'//打包后的文件名，
        environment: {//不使用箭头函数
            arrowFunction: false
        }
    }，
    module:{//webpack打包时要使用的模块
        rules:[//指定加载的规则
            {
                test: /\.ts$/, //指定规则生效的文件（正则表达式）
                use: [
                    'ts-loader',
                    {//配置babel
                        loader:'babel-loader',
                        options:{
                            presets:[//设置预定义的环境
                                [
                                    '@babel/preset-env',//指定环境插件
                                    {
                                        targets:{'chorme':版本号}，//要兼容的目标浏览器
                                        'corejs':3//corejs版本，
                                        useBuiltIns:"usage"//按需加载
                                    }
                                ]
                            ]
                        }
                    }
                ],
                exclude: /node-modules/,//要排队的文件
            }
        ],
        plugins:[
            new HTMLWebpackPlugin()
            {
                title: //自定义title,
                template://引入html模版 scr/index.html
            }
        ]
    }
    
}