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']
    }
}
相关文章
|
2月前
|
前端开发
在Webpack配置文件中,如何配置loader以处理其他类型的文件,如CSS或图片
在Webpack配置文件中,通过设置`module.rules`来配置loader处理不同类型的文件。例如,使用`css-loader`和`style-loader`处理CSS文件,使用`file-loader`或`url-loader`处理图片等资源文件。配置示例:在`rules`数组中添加对应规则,指定`test`匹配文件类型,`use`指定使用的loader。
|
2月前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
61 1
|
2月前
|
缓存 前端开发 JavaScript
Webpack与Babel的进阶配置与优化
通过以上的进阶配置和优化策略,可以更好地发挥`Webpack`与`Babel`的功能,提高项目的性能和开发效率。
|
2月前
|
JavaScript 前端开发 UED
如何配置 Webpack 进行代码分离?
通过以上方法,可以有效地配置Webpack进行代码分离,根据项目的具体需求和场景选择合适的方式,能够显著提高应用的性能和用户体验。在实际应用中,还可以结合其他优化技术,进一步优化Webpack的打包结果和应用的加载速度。
78 5
|
2月前
|
前端开发 JavaScript
webpack相关配置
以上只是Webpack配置的一些常见部分,实际应用中还可以根据具体的项目需求和场景进行更复杂和细致的配置,以满足不同的构建和优化要求。
65 2
|
1月前
|
存储 JavaScript NoSQL
Node.js新作《循序渐进Node.js企业级开发实践》简介
《循序渐进Node.js企业级开发实践》由清华大学出版社出版,基于Node.js 22.3.0编写,包含26个实战案例和43个上机练习,旨在帮助读者从基础到进阶全面掌握Node.js技术,适用于初学者、进阶开发者及全栈工程师。
61 9
|
2月前
|
存储 JavaScript 搜索推荐
Node框架的安装和配置方法
安装 Node 框架是进行 Node 开发的第一步,通过正确的安装和配置,可以为后续的开发工作提供良好的基础。在安装过程中,需要仔细阅读相关文档和提示,遇到问题及时解决,以确保安装顺利完成。
153 2
|
2月前
|
缓存 JavaScript 前端开发
配置 Webpack 进行代码分离的常见方法有哪些?
通过以上常见方法,可以根据项目的具体需求和场景,灵活地配置Webpack进行代码分离,从而提高应用的性能和加载速度,优化用户体验。
45 3
|
2月前
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API
使用JavaScript和Node.js构建简单的RESTful API
|
4月前
|
算法 安全 Java
微服务(四)-config配置中心的配置加解密
微服务(四)-config配置中心的配置加解密

热门文章

最新文章