一、安装各种依赖
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:\TypeScript\lianxi\webpack-ceshi/package.json npm ERR! errno -4058 npm ERR! enoent ENOENT: no such file or directory, open 'G:\TypeScript\lianxi\webpack-ceshi\package.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:\Users\dell\AppData\Local\npm-cache\_logs\2023-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:\TypeScript\lianxi\webpack-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 details13 vulnerabilities (1 low, 3 moderate, 7 high, 2 critical)
To address issues that do not require attention, run:
npm audit fixTo address all issues, run:
npm audit fix --forceRun `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:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts [tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts(680,34) TS1005: '?' expected. ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts [tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts(681,17) TS1005: ':' expected. ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts [tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts(682,17) TS1005: ',' expected. ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts [tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts(685,34) TS1005: '?' expected. ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts [tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts(686,17) TS1005: ':' expected. ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts [tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts(687,17) TS1005: ',' expected. ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts [tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts(687,26) TS1005: ',' expected. ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts [tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts(688,5) TS1109: Expression expected. ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts [tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts(692,24) TS1005: ',' expected. ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts [tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts(696,35) TS1005: ',' expected. ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts [tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts(702,39) TS1005: ',' expected. ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts [tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts(706,21) TS1005: ',' expected. ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts [tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts(711,19) TS1005: ',' expected. ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts [tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts(711,27) TS1005: ':' expected. ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts [tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts(711,36) TS1005: ',' expected. ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts [tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts(711,55) TS1005: '{' expected. ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts [tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts(711,64) TS1005: ',' expected. ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts [tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts(711,77) TS1005: ',' expected. ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.d.ts [tsl] ERROR in G:\TypeScript\lianxi\webpack-ceshi\node_modules\@types\node\ts4.8\test.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:\TypeScript\lianxi\webpackceshi\node_modules\@types\node\ts4.8\test.d.ts
[tsl]ERRORinG:\TypeScript\lianxi\webpackceshi\node_modules\@types\node\ts4.8\test.d.ts(680,34)
TS1005: '?' expected.
解决办法：
安装最新版本不会出现这样的问题，会出现新的问题。
3.npm run dev遇到的问题二
PS G:\TypeScript\lianxi\webpack-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:\TypeScript\lianxi\webpack-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!!!");在控制台就可以正常输出，并不报错。（应该是浏览器的原因）
