前言相信大家都知道TypeScript的好处。TypeScript编译工具可以运行在任何服务器和任何系统上。TypeScript增加了代码的可读性和可维护性，值得学习！接下来就带大家一步步实现TypeScript开发环境的搭建~安装Node.js相信大家的电脑一般都安装了node.js。如果不确定是否安装，可以在cmd中输入以下命令：node-v如果看到版本号，说明已经安装了~创建文件夹文件夹名称：xiaomingmkdirxiaoming切换到新文件夹directorycdxiaominginitializationprojectnpminitAnswerquestions然后出来这么一连串的问题，可以直接回车，使用默认值包名：(xiaoming)version:(1.0.0)description:entrypoint:(index.html)js)测试命令：gitrepository:keywords:author:license:(ISC)即将写入C:\Users\明\Desktop\xiaoming\package.json:{"name":"xiaoming","version":"1.0.0","description":"","main":"index.js","scripts":{"test":"echo\"Error:notestspecified\"&&exit1"},"author":"","license":"ISC"}可以吗？(yes)然后工程中会出现一个包。json配置文件中出现的package.json配置文件内容如下：{"name":"xiaoming","version":"1.0.0","description":"","main":"index.js","scripts":{"test":"echo\"Error:notestspecified\"&&exit1"},"author":"","license":"ISC"}在Mac电脑上全局安装typescript，需要在npm前面加上sudo，即以管理员身份运行npminstallwebpackwebpack-clitypescriptts-loader--save-dev安装成功后，输入项目根目录，使用tsc命令初始化tsc--init此时，项目根目录下多了一个tsconfig.json文件，此时tsconfig.json的代码如下：添加webpack然后添加webpack，这里我们使用webpack4npminstallwebpack-cliwebpackdev-server-D这里提一下webpack4的亮点：webpack4最大的亮点就是我们需要的配置越少越好，我们知道在使用webpack2的时候3、我们需要写很多wepack配置，很多资源需要添加node，webpack4里面很多东西都是零配置的，到这里就安装完成了，需要写一个webpack配置文件~写webpck配置文件到创建一个build文件夹，在里面创建一个webpack.config.js文件，代码如下：/Usingnode的modulemodule.exports={//这是我们项目编译的入口文件entry:"./src/index.ts",output:{filename:"main.js"},resolve:{extensions:['.ts','tsx','.js']},//这里可以配置对指定文件的一些处理//这里匹配后缀为ts或tsx的文件//使用exclude排除一些文件module:{rules:[{test:/\.tsx?$/,use:'ts-loader',excludee:/node_modules/}]},//这个参数可以在webpackdevtool中获取：process.env.NODE_ENV==='production'?false:'inline-source-map',devServer:{//这个根据本地开发环境运行时的根目录是哪个文件夹contentBase:'./dist',//出错时打印statsontheconsole:'errors-only',//不开始压缩compress:false,host:'localhost',port:8081},//这里是一些插件plugins:[newCleanWebpackPlugin({cleanOnceBeforeBuildPatterns:['./dist']}),newHtmlWebpackPlugin({template:'./src/template/index.html'})]}继续在src目录下创建文件，在src目录下创建./src/index.ts，创建一个template文件夹，并在template文件夹下创建index.html目录结构如下：安装ts-加载器解析ts文件，转换成浏览器可以识别的文件。npminstallts-loader-D安装cross-env，用于设置环境变量，方便搭建开发环境和生产环境。npminstallcross-env-D安装一些插件clean-webpack-plugin可以清理一些指定文件夹html-webpack-plugin指定编译模型npminstallclean-webpack-pluginhtml-webpack-plugin-Dproject安装typescript依赖在pac上全局安装npminstalltypescript之前在kage.json文件中写入指定命令。上面的weapack命令已经写好了。接下来，我们将在package.json文件中写入指定的命令："build":"cross-envNODE_ENV=productionwebpack--config./build/webpack.config.js"}，在index.ts中写代码测试letnum:number=888document.title='ming'启动本地服务器，安装完成后执行npmstart。效果：打包执行npmrunbuild这里多出一个dist目录最后如果本文对你有帮助请给本文点个赞??????欢迎大家加入，一起学习前端，一起进步！
