账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    求助webpack5+babel7编译typescript的问题
    39
    0
    请问一下编译ts是用@babel/preset-typescript还是ts-loader？我查了很多说babel7出来了就不需要用ts-loader了，还有就是webpack可以编译ts为什么还要用babel来编译，就搞得我很头大...主要就是有几个地方：ts-loader可以生成.d.ts类型声明文件。webpack还没找到相关方法，不过这个问题不大，大不了自己走一遍tsc，主要还是编译过程中有问题。babel-loader的test是/\.js$/还是/\.ts$/，总感觉用什么都没有生效，因为两种打包的东西一开始就有一个箭头函数...两种方法我试了，但是总还是不对，索性就把我的配置都贴上来了，请大佬看一下哪里出了问题，不是同时用！！！如果用ts-loader我就会把@babel/preset-typescript干掉，反之就把ts-loader干掉// webpack.config.jsconst path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: path.join(__dirname, '../source/bridge.ts'), output: { filename: 'bridge.[fullhash].js', path: path.resolve(__dirname, '../lib'), clean: true // 清空打包文件夹 }, resolve: { extensions: ['.js', '.ts'] }, module: { rules: [ { test: /\.ts$/, use: 'ts-loader', exclude: /node_modules/ }, { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ } ] }, plugins: [ new HtmlWebpackPlugin({ title: 'demo', filename: 'index.html', template: path.resolve(__dirname, '../demo/index.html') }) ]};// babel.config.json{ "presets": [ [ "@babel/preset-env", { "modules": false } ], "@babel/preset-typescript" ], "plugins": [ [ "@babel/plugin-transform-runtime", { "corejs": { "version": 3, "proposals": true }, "useESModules": true } ], "@babel/proposal-class-properties", "@babel/proposal-object-rest-spread", ]}// ts.config.json{ "include": ["source/*.ts", "source/type.d.ts"], "exclude": ["node_modules"], "compilerOptions": { /* Visit https://aka.ms/tsconfig.json to read more about this file */ "target": "ES5", "module": "ESNext", "lib": [ "ES2021", "DOM", "DOM.Iterable", "ScriptHost" ], "allowJs": true, "isolatedModules": true, "strict": true, "moduleResolution": "node", "esModuleInterop": true, "declaration": true, "sourceMap": true, "outDir": "lib", "rootDir": "source", "allowSyntheticDefaultImports": true, // 当启用 esModuleInterop 时，将同时启用 allowSyntheticDefaultImports "skipLibCheck": true, // 忽略所有的声明文件（ *.d.ts）的类型检查 "forceConsistentCasingInFileNames": true, "suppressImplicitAnyIndexErrors": true // 支持window[xxx]这种写法 }}
    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 云峰仙踪 普通会员 1楼

      在使用Webpack 5和Babel 7编译 TypeScript 时，你可能遇到以下一些问题：

      1. 编译器问题：Webpack 5使用的是TypeScript 3.x，而Babel 7支持TypeScript 4.x，导致编译器版本不兼容。你可以在Webpack配置中使用@babel/plugin-transform-typescript@4插件来支持TypeScript 4.x。

      javascript module.exports = { resolve: { extensions: ['.ts', '.js'], modules: ['node_modules'] }, // ... plugins: [ // 使用@babel/plugin-transform-typescript@4插件 '@babel/plugin-transform-typescript@4', ], };

      1. 不支持export：在TypeScript 4.x中，export关键字已被弃用，因此，你不能在函数或类的声明中使用export关键字来导出函数或类。你可以使用@babel/plugin-transform-declaration@4插件来处理这种问题。

      javascript module.exports = { resolve: { extensions: ['.ts', '.js'], modules: ['node_modules'] }, // ... plugins: [ // 使用@babel/plugin-transform-declaration@4插件 '@babel/plugin-transform-declaration@4', ], };

      1. TypeScript 4.x语法问题：TypeScript 4.x中，引入函数时，其类型会自动解析为any。如果你想要明确声明函数的类型，可以使用@babel/plugin-transform-function-declaration@4插件。

      javascript module.exports = { resolve: { extensions: ['.ts', '.js'], modules: ['node_modules'] }, // ... plugins: [ // 使用@babel/plugin-transform-function-declaration@4插件 '@babel/plugin-transform-function-declaration@4', ], };

      1. TypeScript 4.x类型声明问题：在TypeScript 4.x中，函数声明可以使用type关键字。然而，type关键字的使用方式发生了变化，现在需要使用type参数。例如，type Foo会转化为type { type: string; }。

      javascript module.exports = { resolve: { extensions: ['.ts', '.js'], modules: ['node_modules'] }, // ... plugins: [ // 使用@babel/plugin-transform-function-declaration@4插件 '@babel/plugin-transform-function-declaration@4', ], };

      1. TypeScript 4.x的默认参数类型：在TypeScript 4.x中，默认参数类型需要被明确声明。例如，function (x: number, y: number) {}会转化为function (x: number, y: number) { this.x = x; this.y = y; }。

      javascript module.exports = { resolve: { extensions: ['.ts', '.js'], modules: ['node_modules'] }, // ... plugins: [ // 使用@babel/plugin-transform-function-declaration@4插件 '@babel/plugin-transform-function-declaration@4', ], };

      1. TypeScript 4.x的默认返回类型：在TypeScript 4.x中，默认返回类型也需要被明确声明。例如，function (x: number, y: number) { return y + x; }会转化为function (x: number, y: number) { return y + x; } { return y + x; }。

      javascript module.exports = { resolve: { extensions: ['.ts', '.js'], modules: ['node_modules'] }, // ... plugins: [ // 使用@babel/plugin-transform-function-declaration@4插件 '@babel/plugin-transform-function-declaration@4', ], };

      1. 类型注释：在TypeScript 4.x中，使用//注释和/**注释可以表示函数、类、模块等声明，但需要使用@typescript-eslint/no-empty-comment扩展来防止注释被忽略。

      javascript module.exports = { resolve: { extensions: ['.ts', '.js'], modules: ['node_modules'] }, // ... plugins: [ // 使用@babel/plugin-transform-function-declaration@4插件 '@babel/plugin-transform-function-declaration@4', '@typescript-eslint/no-empty-comment', ], };

      请根据上述解决方案，将你的Webpack配置中的@babel/plugin-transform-typescript@4、@babel/plugin-transform-declaration@4、@babel/plugin-transform-function-declaration@4、@typescript-eslint/no-empty-comment等插件应用到你的项目中，以实现Webpack 5和Babel 7编译 TypeScript的功能。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部