tsconfig.json 基础配置文件

{
    /*
    include:用来指定哪些ts文件需要被编译
    路径：**表示任意目录
    *表示任意文件
    exclude:不需要被编译的文件目录
    默认值：["node"]
    */
    "include": ["./src/*"],
    // "exclude": ["./node_modules/*"],
    "compilerOptions": {
        //target: js的版本
        /*
        'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'es2021', 'esnext'.
        */
        "target": "es2015",

        "module": "amd",
        //module  规范 
        /*
        'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'esnext'.
        */
        "lib": ["es6","dom"],
        //lib 项目中需要使用的库
        /*
         'es5', 'es6', 'es2015', 'es7', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'es2021', 'esnext', 'dom', 'dom.iterable', 'webworker', 'webworker.importscripts', 'webworker.iterable', 'scripthost', 'es2015.core', 'es2015.collection', 'es2015.generator', 'es2015.iterable', 'es2015.promise', 'es2015.proxy', 'es2015.reflect', 'es2015.symbol', 'es2015.symbol.wellknown', 'es2016.array.include', 'es2017.object', 'es2017.sharedmemory', 'es2017.string', 'es2017.intl', 'es2017.typedarrays', 'es2018.asyncgenerator', 'es2018.asynciterable', 'es2018.intl', 'es2018.promise', 'es2018.regexp', 'es2019.array', 'es2019.object', 'es2019.string', 'es2019.symbol', 'es2020.bigint', 'es2020.promise', 'es2020.sharedmemory', 'es2020.string', 'es2020.symbol.wellknown', 'es2020.intl', 'es2021.promise', 'es2021.string', 'es2021.weakref', 'esnext.array', 'esnext.symbol', 'esnext.asynciterable', 'esnext.intl', 'esnext.bigint', 'esnext.string', 'esnext.promise', 'esnext.weakref'
        */
        //用来指定编译后文件所在的目录
        "outDir": "./dist",
        //设置outFile后，室友的全局作用域中的代码会合并到同一个文件中
        // "outFile": "./dist/app.js",

        //是否对js文件进行编译 默认不编译
        "allowJs": true,
        //是否检测js
        "checkJs":true ,

        //是否移除注释 默认false
        "removeComments":true ,

        //不生成编译后的文件(默认false) 即只是用ts的检查功能补使用ts的编译功能
        "noEmit":false ,

        //当有错误时不生产编译后的文件 默认false
        "noEmitOnError":true ,

        //所有严格检查的总开关 默认false(true 全部打开  false 全部关闭)
        "strict": true,

        // 开启严格模式 默认false
        "alwaysStrict": true,
    
        //不允许隐式any 类型  默认false
        "noImplicitAny":true,
        
        //不允许this 类型是否明确  默认false
        "noImplicitThis":true ,

        //严格的检查空值 默认false
        "strictNullChecks":true ,
    }
}

View Code

项目初始化

npm  init

下载webpack 及相应的loader

npm i -D webpack  webpack-cli typescript ts-loader

 package.json 配置

{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^9.2.6",
    "typescript": "^4.4.4",
    "webpack": "^5.59.1",
    "webpack-cli": "^4.9.1"
  }
}

View Code

webpack 编译ts 配置

const path=require('path');

module.exports={
    //入口文件
    entry:'./src/index.ts',
    //指定打包文件所在目录
    output:{
        //指定打包文件的目录
        path:path.resolve(__dirname,'dist'),
        //打包后文件的文件名
        filename:'bundle.js'
    },
    //指定webpack打包时使用的模块
    module:{
        //指定加载的规则
        rules:[
            {
                //test  匹配指定规则生效的文件
                test:/\.ts$/,
                //要使用的loader
                use:'ts-loader',
                //忽略的文件
                exclude:/node_modules/
            }
        ]
    }
}

View Code

tsconfig.js 打包配置文件

{
    "include": ["./src/*"],
    "compilerOptions": {
        "target": "es2015",
        "module": "es2015",
        "strict": true
    }
}

View Code

 

html-webpack-plugin  插件打包html模板

npm install -D html-webpack-plugin

webpack.config.js 配置 打包生成html模板  并自动引入 打包后的js css 等文件

const path=require('path');

//引入html插件
const HTMLWebpackPlugin=require('html-webpack-plugin')

module.exports={
    //入口文件
    entry:'./src/index.ts',
    //指定打包文件所在目录
    output:{
        //指定打包文件的目录
        path:path.resolve(__dirname,'dist'),
        //打包后文件的文件名
        filename:'bundle.js'
    },
    //指定webpack打包时使用的模块
    module:{
        //指定加载的规则
        rules:[
            {
                //test  匹配指定规则生效的文件
                test:/\.ts$/,
                //要使用的loader
                use:'ts-loader',
                //忽略的文件
                exclude:/node_modules/
            }
        ]
    },

    //配置webpack插件
    plugins:[
        new HTMLWebpackPlugin(),
    ]
}

View Code

安装webpack-dev-server  内置服务器

npm install -D  webpack-dev-server

package中添加一条指令

  "start":"webpack serve --open chrome.exe"

安装 clean-webpack-plugin    插件  每次打包先清空上次的文件 保证每次都是生成的最新文件

npm install -D clean-webpack-plugin

 

最终打包编译 webpack.config.js文件

const path=require('path');

//引入html插件
const HTMLWebpackPlugin=require('html-webpack-plugin')
//引入 clear插件
const { CleanWebpackPlugin}=require('clean-webpack-plugin')
module.exports={
    //解决模块化 webpack 不能识别文件的问题
    resolve:{
        //拓展名 帮助webpack识别文件
        extensions:['.ts','js']
    },
    //入口文件
    entry:'./src/index.ts',
    //指定打包文件所在目录
    output:{
        //指定打包文件的目录
        path:path.resolve(__dirname,'dist'),
        //打包后文件的文件名
        filename:'bundle.js'
    },
    //指定webpack打包时使用的模块
    module:{
        //指定加载的规则
        rules:[
            {
                //test  匹配指定规则生效的文件
                test:/\.ts$/,
                //要使用的loader
                use:'ts-loader',
                //忽略的文件
                exclude:/node_modules/
            }
        ]
    },

    //配置webpack插件
    plugins:[

        //打包之前清空之前生成的配置文件
        new CleanWebpackPlugin(),

        //html模板插件
        new HTMLWebpackPlugin({
            // title:'这是一个app的标题',
            //自己提供一个模板 或者使用他带的模板
            template:'./src/index.html',
        }),
    ]
}

View Code