1. 首页
  2. webpack

从0到1搭建TypeScript+webpack4开发环境

相信大家都知道TypeScript的好处~

TypeScript编译工具可以运行在任何服务器和任何系统上,TypeScript增加了代码的可读性和可维护性,很值得我们学习!

下边我将带大家一步步实现TypeScript开发环境搭建~

cmd-markdown-logo

安装Node.js

相信大家电脑一般都安装了node.js

如果不确定是否安装了的话,可以在cmd里面输入以下命令:


node -v 复制代码

如果看到了版本号,则说明已经安装好了~

创建一个文件夹

文件夹名字:xiaoming


mkdir xiaoming 复制代码

切换到新建文件夹目录


cd xiaoming 复制代码

初始化项目


npm init 复制代码

设置配置项

接着出来了这么一系列的问题,大家可以直接回车,使用默认值


package name: (xiaoming) version: (1.0.0) description: entry point: (index.js) test command: git repository: keywords: author: license: (ISC) About to write to C:\Users\明\Desktop\xiaoming\package.json: { "name": "xiaoming", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } Is this OK? (yes) 复制代码

接着项目就会出现一个package.json的配置文件

出现的package.json配置文件内容

内容如下:


{ "name": "xiaoming", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } 复制代码

全局安装typescript

mac电脑需要在npm 前面加sudo,代表以管理员身份运行


npm install webpack webpack-cli typescript ts-loader --save-dev 复制代码

安装成功后进入项目根目录

用tsc命令进行初始化


tsc --init 复制代码

此时项目根目录多了一个tsconfig.json文件

此时tsconfig.json代码如下:

cmd-markdown-logo

添加webpack

再添加webpack,这里我们使用webpack4


npm install webpack-cli webpack dev-server -D 复制代码

在这里我提一下webpack4的亮点:

webpack4最大的亮点就是尽可能少的需要我们去配置

我们知道原来在使用webpack2、3的时候,我们需要写大量的wepack配置,很多资源都要添加node,webpack4很多东西是零配置的

这里安装完了我们需要写一个webpack的配置文件~

写webpck的配置文件

创建一个build文件夹,里面创建webpack.config.js文件, 代码如下:


const HtmlWebpackPlugin = require('html-webpack-plugin') const { CleanWebpackPlugin } = require('clean-webpack-plugin') //使用node的模块 module.exports = { //这就是我们项目编译的入口文件 entry: "./src/index.ts", output: { filename: "main.js" }, resolve: { extensions: ['.ts','tsx','.js'] }, //这里可以配置一些对指定文件的处理 //这里匹配后缀为ts或者tsx的文件 //使用exclude来排除一些文件 module:{ rules:[ { test:/\.tsx?$/, use:'ts-loader', exclude: /node_modules/ } ] }, //这个参数就可以在webpack中获取到了 devtool: process.env.NODE_ENV === 'production'? false : 'inline-source-map', devServer:{ //这个本地开发环境运行时是基于哪个文件夹作为根目录 contentBase:'./dist', //当你有错误的时候在控制台打出 stats: 'errors-only', //不启动压缩 compress: false, host: 'localhost', port: 8081 }, //这里就是一些插件 plugins:[ new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: ['./dist'] }), new HtmlWebpackPlugin({ template: './src/template/index.html' }) ] } 复制代码

继续创建文件

  • 在src的目录下,创建./src/index.ts
  • 在src的目录下,创建template文件夹
  • 在template文件夹下边创建index.html

目录结构如下:

cmd-markdown-logo

安装ts-loader

解析ts文件转换成浏览器可以识别的文件


npm install ts-loader -D 复制代码

安装cross-env

用于设置环境变量的,方便设置开发环境和生产环境


npm install cross-env -D 复制代码

安装一些插件

clean-webpack-plugin 能清理一些指定的文件夹

html-webpack-plugin 指定一个编译的模型


npm install clean-webpack-plugin html-webpack-plugin -D 复制代码

项目中安装typescript依赖

之前是全局安装


npm install typescript 复制代码

在package.json文件写指定命令

上边weapack的命令已经写好了,下边我们就在package.json文件中写指定的命令:


"scripts": { "start": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.js", "build": "cross-env NODE_ENV=production webpack --config ./build/webpack.config.js" }, 复制代码

在index.ts写代码测试一下


let num: number = 888 document.title = 'ming' 复制代码

启动本地服务器执行

安装完毕后


npm start 复制代码

运行效果:

cmd-markdown-logo

打包执行


npm run build 复制代码

这里就多了个dist目录

cmd-markdown-logo

源码

大家可以参考一下我的这个源码


https://github.com/shifengming/xiaoming1 复制代码

最后

如果本文对你有帮助得话,给本文点个赞❤️❤️❤️

欢迎大家加入,一起学习前端,共同进步!

cmd-markdown-logo

作者:小梦哟
链接:https://juejin.im/post/5e3d65c0518825493c7b4880

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:从0到1搭建TypeScript+webpack4开发环境

链接:https://www.javascriptc.com/3928.html

« JavaScript深入之头疼的类型转换(下)
最后一次Webpack 深入再深入总结»
Flutter 中文教程资源

相关推荐

QR code