当前位置：
  1. 首页
  2. 互联网
  3. 正文
本文介绍: 用webpack打包TS时遇到的问题一

一、安装各种依赖

npm install –y

tsc —init

npm i -D typescript@4.0.5

npm i -D webpack@4.41.5 webpack–cli@3.3.10

npm i -D webpack–dev–server@3.10.2    ————–启动开发服务器的

npm i -D html-webpack–plugin@4.0.0-alpha clean-webpack–plugin —-对html内容进行打包/清除之前打包好的js文件

npm i -D ts–loader@8.0.11   —————针对ts文件进行编译处理

npm i -D cross–env   ————-涉及跨平台命令

1.npm install -y

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path G:TypeScriptlianxiwebpack-ceshi/package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'G:TypeScriptlianxiwebpack-ceshipackage.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     C:UsersdellAppDataLocalnpm-cache_logs2023-04-28T11_07_01_079Z-debug-0.log

2.遇到的问题

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.

added 428 packages, and audited 430 packages in 54s

11 packages are looking for funding
  run `npm fund` for details

6 vulnerabilities (4 high, 2 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues, run:
  npm audit fix --force

Run `npm audit` for details.
PS G:TypeScriptlianxiwebpack-ceshi> npm i -D webpack-dev-server@3.10.2
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.

added 191 packages, and audited 621 packages in 57s

29 packages are looking for funding
  run `npm fund` for details

13 vulnerabilities (1 low, 3 moderate, 7 high, 2 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues, run:
  npm audit fix --force

Run `npm audit` for details.

安装时均会遇到如下的问题，就不一一列举了。

29 packages are looking for funding
  run `npm fund` for details

13 vulnerabilities (1 low, 3 moderate, 7 high, 2 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues, run:
  npm audit fix –force

Run `npm audit` for details.

3.安装完成时各种插件的版本号如图

4.解决办法

安装依赖时要用最新版本，不用指定版本号

npm init -y
tsc —init                               产生对应的ts.config.js文件
npm install -D typescript
npm install -D webpack webpack–cli
npm install -D webpack–dev–server      启动开发服务器的
npm install -D html-webpack-plugin clean-webpack-plugin                      对html内容进行打包 / 清除之前打包好的js文件
npm install -D ts–loader    针对ts文件进行编译处理
npm install -D cross–env           涉及跨平台命令

二、执行 npm run build时遇到的问题

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

> 03webpack-ts@1.0.0 build
> cross-env NODE_ENV=production webpack --config build/webpack.config.js

Hash: cd7ca17d5afdc172c4c2
Version: webpack 4.41.5
Time: 3732ms
Built at: 2023/04/28 19:24:08
 2 assets
Entrypoint app = app.0656762f.js app.0656762f.js.map
[0] ./src/main.ts 47 bytes {0} [built]

ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts
[tsl] ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts(680,34)
      TS1005: '?' expected.

ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts
[tsl] ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts(681,17)
      TS1005: ':' expected.

ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts
[tsl] ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts(682,17)
      TS1005: ',' expected.

ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts
[tsl] ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts(685,34)
      TS1005: '?' expected.

ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts
[tsl] ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts(686,17)
      TS1005: ':' expected.

ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts
[tsl] ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts(687,17)
      TS1005: ',' expected.

ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts
[tsl] ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts(687,26)
      TS1005: ',' expected.

ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts
[tsl] ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts(688,5)
      TS1109: Expression expected.

ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts
[tsl] ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts(692,24)
      TS1005: ',' expected.

ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts
[tsl] ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts(696,35)
      TS1005: ',' expected.

ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts
[tsl] ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts(702,39)
      TS1005: ',' expected.

ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts
[tsl] ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts(706,21)
      TS1005: ',' expected.

ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts
[tsl] ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts(711,19)
      TS1005: ',' expected.

ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts
[tsl] ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts(711,27)
      TS1005: ':' expected.

ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts
[tsl] ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts(711,36)
      TS1005: ',' expected.

ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts
[tsl] ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts(711,55)
      TS1005: '{' expected.

ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts
[tsl] ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts(711,64)
      TS1005: ',' expected.

ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts
[tsl] ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts(711,77)
      TS1005: ',' expected.

ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts
[tsl] ERROR in G:TypeScriptlianxiwebpack-ceshinode_modules@typesnodets4.8test.d.ts(715,22)
      TS1005: ',' expected.
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [0] ./node_modules/html-webpack-plugin/lib/loader.js!./public/index.html 194 bytes {0} [built]
    [2] (webpack)/buildin/global.js 472 bytes {0} [built]
    [3] (webpack)/buildin/module.js 497 bytes {0} [built]
        + 1 hidden module

对应的 dist 文件夹也没有。

2.解决办法：

如果插件是最新版本，打包时就不会出现问题了。

三.执行npm run dev遇到的问题

页面会有输出，但是报错

client56b6:159

G:TypeScriptlianxiwebpackceshinode_modules@typesnodets4.8test.d.ts
[tsl]ERRORinG:TypeScriptlianxiwebpackceshinode_modules@typesnodets4.8test.d.ts(680,34)
   TS1005: ‘?’ expected.

 解决办法：

安装最新版本不会出现这样的问题，会出现新的问题。

3.npm run dev遇到的问题二

PS G:TypeScriptlianxiwebpack-ts> npm run dev
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

> webpack-ts@1.0.0 dev
> cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$".
   BREAKING CHANGE since webpack 5: The devtool option is more strict.
   Please strictly follow the order of the keywords in the pattern.

解决办法：

将webpack.config.js 文件中的一条语句给删掉即可。会继续遇到问题

 //针对于代码的错误提示

devtool: isProd ? 'cheap-module-source-map' : 'cheap-module-eval-source-map',

4.npm run dev遇到的问题三

PS G:TypeScriptlianxiwebpack-ts> npm run dev
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

> webpack-ts@1.0.0 dev
> cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js

[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'stats'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }

解决办法：

将webpack.config.js 文件中的一条语句给删掉即可。

stats: 'errors-only', // 打包日志输出输出错误信息

npm run dev正确运行时在控制台的输出为：

5.测试时遇到的问题

在文件主入口输入   document.write(“hello ts!!!”)     进行测试

页面没有正常输出,hello ts!!!

 解决办法：

换成console.log(“hello ts!!!”);在控制台就可以正常输出，并不报错。（应该是浏览器的原因）

原文地址:https://blog.csdn.net/m0_57469571/article/details/130433041

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_19029.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

上一篇 Vue3+Vite+TypeScript 中 TS 文件export type类型报错
下一篇 Vue3自动引入组件，组件库

相关文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

插入图片
浏览器会保存昵称、邮箱和网站cookies信息，下次评论时使用。