node编译TS时,tsconfig.json中的基础配置 与 webpack编译TS时webpack.config.js中的基础配置

简介: node编译TS时,tsconfig.json中的基础配置 与 webpack编译TS时webpack.config.js中的基础配置

一、node编译:tsconfig.json中的配置

{
  /*
  *  tsconfig.json 是ts编译器的配置文件,ts编译器可以根据它的信息,来对代码进行编译
    include 用来指定那些 ts 文件需要被编译
      路径:** 表示任意目录
            * 表示任意文件
    exclude 不需要被编译的文件目录
      默认值:[ "node_modules", "bower_components" ]
  */
  "include": [
    "./**/*"
  ],
  "exclude": [
    "./app/**/*"
  ],
  "extends": "",
  "files": [], // 类似于include,是一个文件列表,一般情况不用
  /*
  compilerOptions:编译器选项
  */
  "compilerOptions": {
    // target 用来指定 ts 被编译为 ES 的版本
    "target": "ES6",
    // module 指定使用的模块化规范
    // 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020',     
    // 'es2022‘,'esnext', 'node12', 'nodenext'
    "module": "asc",
    // lib 用来指定项目中要使用的库,正常不需要设置
    "lib": ["dom"],
    // outDir 指定编译后文件所在的目录
    "outDir": "./dist",
    // outFile 合并编译后的代码
    // 设置 outFile 后,所有的全局作用域代码会合并在同一个文件中
    "outFile": "./dist/app.js"
    // allowJs 是否对 js 文件进行编译,默认是false
    "allowJs": false,
    // checkJs 是否检查 js 代码是否符合语法规范
    "checkJs": false,
    // 是否编译注释
    "removeComments": true,
    // noEmit 不生成编译后的文件(只执行编译过程)
    "noEmit": false,
    // noEmitOnError 当有错误时,不生成编译后的文件
    "noEmitOnError": true,
    // 所有严格检查的总开关
    "strict": true,
    // alwaysStrict 用来设置编译后的文件是否开启严格模式
    "alwaysStrict": true,
    // noImplicitAny 不允许隐式的 any 类型
    "noImplicitAny": true,
    // noImplicitThis 不允许明确类型的 this
    "noImplicitThis": true,
    // 严格的空值检查
    "strictNullChecks": true 
}

二、webpack编译:webpack.config.js中的配置

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin'); // 自动生成 html 插件
module.exports = {
    mode: "none",
    entry: "./src/index.ts",
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "barry.js",
        //配置打包环境,告诉webpack不使用箭头函数
        environment: {
            arrowFunction: false
        }
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: [
                    {
                        // 指定加载器
                        loader: "babel-loader",
                        // 设置 babel
                        options: {
                            // 设置预定义环境
                            presets: [
                                [
                                    // 指定环境插件
                                    "@babel/preset-env",
                                    {
                                        // 要兼容的目标浏览器
                                        targets: {
                                            "chrome": "88",
                                            "ie": "11"
                                        },
                                        // core-js 使用版本
                                        "corejs": "3",
                                        "useBuiltIns": "usage"
                                    }
                                ]
                            ]
                        }
                    },
                    "ts-loader"],
                exclude: /node-modules/
            }
        ]
    },
    // 配置 webpack 插件
    plugins: [
        new HTMLWebpackPlugin({template: "./src/index.html"})
    ],
    // 用来设置引用模块
    resolve: {
        extensions: ['.ts', '.js']
    }
}
相关文章
|
25天前
|
前端开发
在Webpack配置文件中,如何配置loader以处理其他类型的文件,如CSS或图片
在Webpack配置文件中,通过设置`module.rules`来配置loader处理不同类型的文件。例如,使用`css-loader`和`style-loader`处理CSS文件,使用`file-loader`或`url-loader`处理图片等资源文件。配置示例:在`rules`数组中添加对应规则,指定`test`匹配文件类型,`use`指定使用的loader。
|
1月前
|
缓存 前端开发 JavaScript
Webpack与Babel的进阶配置与优化
通过以上的进阶配置和优化策略,可以更好地发挥`Webpack`与`Babel`的功能,提高项目的性能和开发效率。
|
1月前
|
JavaScript 前端开发 UED
如何配置 Webpack 进行代码分离?
通过以上方法,可以有效地配置Webpack进行代码分离,根据项目的具体需求和场景选择合适的方式,能够显著提高应用的性能和用户体验。在实际应用中,还可以结合其他优化技术,进一步优化Webpack的打包结果和应用的加载速度。
45 5
|
1月前
|
前端开发 JavaScript
webpack相关配置
以上只是Webpack配置的一些常见部分,实际应用中还可以根据具体的项目需求和场景进行更复杂和细致的配置,以满足不同的构建和优化要求。
38 2
|
1月前
|
缓存 JavaScript 前端开发
配置 Webpack 进行代码分离的常见方法有哪些?
通过以上常见方法,可以根据项目的具体需求和场景,灵活地配置Webpack进行代码分离,从而提高应用的性能和加载速度,优化用户体验。
30 3
|
1月前
|
缓存 前端开发 JavaScript
前端性能优化:Webpack与Babel的进阶配置与优化策略
【10月更文挑战第28天】在现代Web开发中,Webpack和Babel是不可或缺的工具,分别负责模块打包和ES6+代码转换。本文探讨了它们的进阶配置与优化策略,包括Webpack的代码压缩、缓存优化和代码分割,以及Babel的按需引入polyfill和目标浏览器设置。通过这些优化,可以显著提升应用的加载速度和运行效率,从而改善用户体验。
55 6
|
1月前
|
缓存 监控 前端开发
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第26天】前端工程化是现代Web开发的重要趋势,通过将前端代码视为工程来管理,提高了开发效率和质量。本文详细对比了Webpack和Gulp两大主流构建工具的选择与配置优化,并提供了具体示例代码。Webpack擅长模块化打包和资源管理,而Gulp则在任务编写和自动化构建方面更具灵活性。两者各有优势,需根据项目需求进行选择和优化。
74 7
|
1月前
|
前端开发
配置 Webpack 实现热更新
【10月更文挑战第23天】还可以进一步深入探讨热更新的具体实现细节、不同场景下的应用案例,以及如何针对特定需求进行优化等方面的内容。通过全面、系统地了解 Webpack 热更新的配置方法,能够更好地利用这一功能,提升项目的开发效率和性能表现。同时,要不断关注 Webpack 及相关技术的发展动态,以便及时掌握最新的热更新技术和最佳实践。
|
1月前
|
缓存 前端开发 JavaScript
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第27天】在现代前端开发中,构建工具的选择对项目的效率和可维护性至关重要。本文比较了Webpack和Gulp两个流行的构建工具,介绍了它们的特点和适用场景,并提供了配置优化的最佳实践。Webpack适合大型模块化项目,Gulp则适用于快速自动化构建流程。通过合理的配置优化,可以显著提升构建效率和性能。
49 2
|
1月前
|
存储 缓存 监控
配置 Webpack 5 持久化缓存时需要注意哪些安全问题?
【10月更文挑战第23天】通过全面、系统地分析和应对安全问题,能够更好地保障 Webpack 5 持久化缓存的安全,为项目的成功构建和运行提供坚实的安全基础。同时,要保持对安全技术的关注和学习,不断提升安全防范能力,以应对日益复杂的安全挑战。