创建TypeScript工程错误排查

1.新建文件夹

2.初始化项目:在控制台输入npm init -y

3.全局安装TS :npm i typesscript -g 全局安装完就可使用tsc命令行了

错误1:

tsc : 无法加载文件 C:\Program Files (x86)\Microsoft Visual Studio\2019\Enterprise\MSBuild\Microsoft\VisualStudio\NodeJs\tsc.ps1。未对文件  
C:\Program Files (x86)\Microsoft Visual Studio\2019\Enterprise\MSBuild\Microsoft\VisualStudio\NodeJs\tsc.ps1 进行数字签名。无法在当前系统  
上运行该脚本。有关运行脚本和设置执行策略的详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。   
所在位置 行:1 字符: 1
+ tsc --init
+ ~~~
    + CategoryInfo          : SecurityError: (:) []，PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess  

解决方案:

打开 PowerShell(用管理员身份打开) 输入 set-ExecutionPolicy RemoteSigned  ;选择Y 

PS C:\WINDOWS\system32> set-ExecutionPolicy RemoteSigned

执行策略更改
执行策略可帮助你防止执行不信任的脚本。更改执行策略可能会产生安全风险，如 https:/go.microsoft.com/fwlink/?LinkID=135170
中的 about_Execution_Policies 帮助主题所述。是否要更改执行策略?
[Y] 是(Y)  [A] 全是(A)  [N] 否(N)  [L] 全否(L)  [S] 暂停(S)  [?] 帮助 (默认值为“N”): y
PS C:\WINDOWS\system32>

错误2:

 

[webpack-cli] TypeError: merge is not a function
    at module.exports (E:\Project\Studay\bulid\webpack.config.js:8:12)
    at async Promise.all (index 0)
    at async WebpackCLI.loadConfig (E:\Project\Studay\node_modules\webpack-cli\lib\webpack-cli.js:1765:29)
    at async WebpackCLI.createCompiler (E:\Project\Studay\node_modules\webpack-cli\lib\webpack-cli.js:2187:18)
    at async Command.<anonymous> (E:\Project\Studay\node_modules\@webpack-cli\serve\lib\index.js:106:30)
    at async Promise.all (index 1)
    at async Command.<anonymous> (E:\Project\Studay\node_modules\webpack-cli\lib\webpack-cli.js:1674:7)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! studay@1.0.0 start: `webpack-dev-server --mode=development --config ./bulid/webpack.config.js`
npm ERR! Exit status 2

以上错误  这webpack4.x升级webpack5.x后, require('webpack-merge') 返回的是一个对象,将  webpack.config.js中的

const  merge = require('webpack-merge')

改为:

const {merge} = require('webpack-merge')

错误3:

 

[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.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! studay@1.0.0 start: `webpack-dev-server --mode=development --config ./bulid/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the studay@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

这也是webpack4.x升级webpack5.x后,devtool中的验证更加严格导致的,只能以 inline 或hidden- 或 eval-开头,以source-map结尾.调整webpack.dev.config.js中的

devtool :  'cheap-module-eval-source-map'

这里不是以 以上上个开头,调整一下即可:

devtool :  'eval-cheap-module-source-map'