>[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'], }, }, ], }, ], }, }; ~~~