《TypeScript》一文入门Webpack构建工程化项目

随便找个目录，创建一个文件夹，这个文件夹就是以后的项目文件夹。

​

安装NodeJS

---

如果没有安装过node，先到NodeJS官网下载安装包，下载成功后，点击下一步下一步，直到安装成功，安装成功通过命令查看是否安装成功，安装成功会显示版本号

node -v

当NodeJS安装成功后会同步安装一个工具，叫做npm，可以通过npm查看是否安装成功，安装成功会显示版本号

npm -v

​

初始化项目

---

使用npm初始化配置文件

npm init -y

执行后，会生成一个叫做package.json的配置文件，这个文件就是项目工程的基础，之后所有依赖的安装，都会通过npm记录进这个文件。

​

安装TypeScript

---

建议安装一个全局的TypeScript，以及安装项目局部的TypeScript：

全局安装

全局安装的好处就是可以在任意地方都是要typescript的命令

npm install -g typescript

安装成功后，可以使用命令查看typescript版本

tsc -version

局部安装

进入项目文件夹

npm install typescript -D

安装成功后，可以在package.json中的devDependencies属性中查看到typescript安装的版本，另外，如果安装需要安装指定版本，那么需要指定版本号，比如

npm install typescript@3.0.0 -D

初始化Typescript

---

Typescript也是有配置文件的，就和package.json一样，进入项目文件夹，输入命令

tsc --init

此时会在当前的路径下生成一个名为：tsconfig.json，的文件，这个文件是对Typescript的描述，里面的配置信息采用默认的就行

​

之后安装ts-loader，这个loader是用来解析TS代码的，因为TS代码本身是不被支持的，浏览器也好还是node也好，最终认识的还是JS代码，因此，开发完的TS项目还是要转成JS代码，安装的命令如下

npm install ts-loader -D

安装好了之后，需要配置，配置的话需要配置在webpack的里，具体请看下一节

​

安装Webpack

---

webpack也可以分为全局安装和局部安装，建议全局安装一个，然后也是局部安装一个

​

全局安装

npm install webpack -g

​

局部安装

npm install webpack -g

不管是全局安装还是局部安装，也都是可以指定版本的，不同的版本接口功能不完全一样，因此，建议安装的时候考虑好版本问题，目前主流的应该是webpack4，webpack5还相对没有那么多；

​

配置Webpack

---

在当前的目录下，新建一个名为，webpack.config.js的文件，这个文件就是webpack的配置文件，具体的配置信息可以简单参考一下示例，webpack是非常强大的打包工具，配置信息很复杂，具体请到Webpack官网，查看

const path = require(“path”);

module.exports = {

entry: path.resolve(__dirname, “…/demo/index.ts”),

output: {

filename: “demo.min.js”,

path: path.resolve(__dirname, “…/dist”),

},

module: {

// 配置ts-loader，用来解析ts代码

rules: [

{

test: /.tsx?$/,

use: “ts-loader”,

exclude: /node_modules/,

},

],

},

resolve: {

extensions: [“.js”, “.ts”, “.tsx”],

},

optimization: {

// 简单拆包

总结

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！