>[success] # js 解析 将 `js` 的js 语法进行， 转编译器，它能将高版本转换后直接在旧版本的js引擎上运行 1. 安装 `npm i -D @babel/core @babel/preset-env babel-loader` * `@babel/core` ' Babel 实现转换的核心，他是依赖能力更底层的 `@babel/parser、 @babel/code-frame、@babel/generator、@babel/traverse、@babel/types`等 * `@babel/preset-env` Babel 只是一个编译器你需要告诉他转换规则，需要在transformer利用我们配置好的` plugins/presets`把 **Parser生成的 AST转变为新的 AST**，即`@babel/preset-env`就是一套**转换规则集合** * `babel-loader` webpack loader 插件 >[info] ## 使用 1. 可以使用`.babelrc`文件或`rule.options`属性配置 Babel 功能逻辑 2. 首先遵循`babelrc` 使用配置，在根目录添加一个`.babelrc`文件目录 ~~~ { "presets": [ [ "@babel/preset-env", { "useBuiltIns": "usage", "corejs": 3 } ] ], "plugins": [ [ "@babel/plugin-transform-runtime", { "absoluteRuntime": false, "corejs": 3, "helpers": true, "regenerator": true, "useESModules": false, } ] ] } ~~~ * 入口文件 ~~~ const getName = () => { return 'w' } const _name = getName() function printFullName() { const s = 'zz' return s + _name } const pr = new Promise((res, rej) => { res(printFullName()) }) pr.then((r) => { console.log(r) }) ~~~ * 配置文件 ~~~ rules: [ { test: /\.js$/, use: 'babel-loader', // 配合babel 解析一些 ES6+的JS代码 // options: { // presets: ['@babel/preset-env'], // }, }, ], ~~~  >[success] # ts 解析 Webpack 有很多种接入 TypeScript 的方法，包括`ts-loader`、`awesome-ts-loader`、`babel-loader`。通常可使用`ts-loader`构建 >[info] ## 使用 typescript ts-loader 1. 安装 `npm i -D typescript ts-loader` * 配置webpack.config.js,`resolve.extensions`声明自动解析`.ts`后缀文件，这意味着代码如`import "./a.ts"`可以忽略后缀声明，简化为`import "./a"`文件 ~~~ const path = require('path'); module.exports = { /* xxx */ module: { rules: [ { test: /\.ts$/, use: 'ts-loader' }, ], }, resolve: { extensions: ['.ts', '.js'], } }; ~~~ 要记得生成`tsconfig.json` 文件 >[danger] ##### 如果用了ts-loader，还需要Babel吗？ **不需要了**，使用`ts-loader`即可,首先弄清Babel是用来转换语法到es5一般，`ts-loader`会帮我们将ts直接转换为js，但是注意垫片polyfill 还是需要的 https://www.zhihu.com/question/322722786 >[info] ## babel-loader 1. 项目中已经使用`babel-loader`，你也可以选择使用[`@babel/preset-typescript`](https://link.juejin.cn/?target=https%3A%2F%2Fbabeljs.io%2Fdocs%2Fen%2Fbabel-preset-typescript "https://babeljs.io/docs/en/babel-preset-typescript")规则集，借助`babel-loader`完成 JavaScript 与 TypeScript 的转码工作 2. 安装 `npm i -D @babel/preset-typescript` ~~~ module.exports = { /* ... */ module: { rules: [ { test: /\.js$/, use: [ { loader: 'babel-loader', options: { presets: ['@babel/preset-typescript'], }, }, ], }, ], }, }; ~~~