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']
    }
}
相关文章
|
7月前
|
前端开发
在Webpack配置文件中,如何配置loader以处理其他类型的文件,如CSS或图片
在Webpack配置文件中,通过设置`module.rules`来配置loader处理不同类型的文件。例如,使用`css-loader`和`style-loader`处理CSS文件,使用`file-loader`或`url-loader`处理图片等资源文件。配置示例:在`rules`数组中添加对应规则,指定`test`匹配文件类型,`use`指定使用的loader。
|
7月前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
184 1
|
7月前
|
缓存 前端开发 JavaScript
Webpack与Babel的进阶配置与优化
通过以上的进阶配置和优化策略,可以更好地发挥`Webpack`与`Babel`的功能,提高项目的性能和开发效率。
|
7月前
|
JavaScript 前端开发 UED
如何配置 Webpack 进行代码分离?
通过以上方法,可以有效地配置Webpack进行代码分离,根据项目的具体需求和场景选择合适的方式,能够显著提高应用的性能和用户体验。在实际应用中,还可以结合其他优化技术,进一步优化Webpack的打包结果和应用的加载速度。
214 5
|
3月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
1758 23
|
4月前
|
JavaScript 前端开发 数据可视化
【01】Cocos游戏开发引擎从0开发一款游戏-cocos环境搭建以及配置-Cocos Creator软件系统下载安装-node环境-优雅草卓伊凡
【01】Cocos游戏开发引擎从0开发一款游戏-cocos环境搭建以及配置-Cocos Creator软件系统下载安装-node环境-优雅草卓伊凡
143 2
【01】Cocos游戏开发引擎从0开发一款游戏-cocos环境搭建以及配置-Cocos Creator软件系统下载安装-node环境-优雅草卓伊凡
|
3月前
|
Prometheus 监控 JavaScript
Node.js连接池配置的五个隐形陷阱与防御体系:从创业公司血泪史说起
文章以创业公司血泪史为例,详细阐述了 Node.js 连接池配置的五个隐形陷阱及防御体系。包括连接泄漏、配置参数算术错误、异步异常导致崩溃、跨连接事务问题、监控缺失,并介绍了相应的解决办法和终极防御手段,强调在确定性与不确定性中寻找平衡,建立自适应机制。
76 13
|
4月前
|
JavaScript 前端开发 IDE
【编程向导】Js与Ts差异详解:选择与权衡
JavaScript 一直是 Web 开发的基石,以其灵活性和动态性著称,但其松散类型可能导致大型项目中出现难以调试的错误。TypeScript 作为 JavaScript 的超集,通过引入静态类型系统,提供了更高的类型安全性和更好的工具支持,尤其适合大型团队和复杂项目。本文详细对比了 JavaScript 和 TypeScript 的优缺点,并提供了实际代码示例,帮助开发者根据项目需求选择合适的工具。
239 2
|
7月前
|
存储 JavaScript 搜索推荐
Node框架的安装和配置方法
安装 Node 框架是进行 Node 开发的第一步,通过正确的安装和配置,可以为后续的开发工作提供良好的基础。在安装过程中,需要仔细阅读相关文档和提示,遇到问题及时解决,以确保安装顺利完成。
411 58
|
6月前
|
存储 JavaScript NoSQL
Node.js新作《循序渐进Node.js企业级开发实践》简介
《循序渐进Node.js企业级开发实践》由清华大学出版社出版,基于Node.js 22.3.0编写,包含26个实战案例和43个上机练习,旨在帮助读者从基础到进阶全面掌握Node.js技术,适用于初学者、进阶开发者及全栈工程师。
121 9