深入浅出Webpack(二）

最新推荐文章于 2021-08-07 11:35:40 发布

原创最新推荐文章于 2021-08-07 11:35:40 发布 · 263 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

自动化构建工具专栏收录该内容

2 篇文章

订阅专栏

本文深入探讨Webpack如何结合Babel和TypeScript进行ES6代码转换与类型检查，涵盖配置细节及依赖安装，确保代码兼容性与高质量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Webpack实战

使用ES6
- Bable是一个 javaScript编译器
TypeScript

使用ES6

Bable是一个 javaScript编译器

在Bable执行编译的过程中，会从项目根目录下的.babelrc文件中读取配置。是一个json格式的文件

{
  "plugins": [
    [
      "transform-runtime",
      {
        "polyfill": false
      }
    ]
   ],
  "presets": [
    [
      "es2015",
      {
        "modules": false
      }
    ],
    "stage-2",
    "react"
  ]
}

plugins 属性告诉 Babel 要使用哪些插件，插件可以控制如何转换代码。
babel-plugin-transform-runtime 是 Babel 官方提供的一个插件，作用是减少冗余代码。 Babel 在把 ES6 代码转换成 ES5 代码时通常需要一些 ES5 写的辅助函数来完成新语法的实现，例如在转换 class extent 语法时会在转换后的 ES5 代码里注入 _extent 辅助函数用于实现继承：
presets 属性告诉 Babel 要转换的源码使用了哪些新的语法特性，一个 Presets 对一组新语法特性提供支持，多个 Presets 可以叠加。 Presets 其实是一组 Plugins 的集合，每一个 Plugin 完成一个新语法的转换工作。
由于 Babel 所做的事情是转换代码，所以应该通过 Loader 去接入 Babel，Webpack 配置如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader'],
      },
    ]
  },
  // 输出 source-map 方便直接调试 ES6 源码
  devtool: 'source-map'
};

配置命中了项目目录下所有的 JavaScript 文件，通过 babel-loader 去调用 Babel 完成转换工作。在重新执行构建前，需要先安装新引入的依赖：

// Webpack 接入 Babel 必须依赖的模块
npm i -D babel-core babel-loader 
// 根据你的需求选择不同的 Plugins 或 Presets
npm i -D babel-preset-env

如果只按照第一个模块依赖，会报错

在这里插入图片描述
继续安装

   npm install @babel/core @babel/preset-env

经过上面一系列操作，ES6的箭头函数语法也可以正确运行了

function closure(sum) {
  for (let i = 0; i < sum; i++) {
    console.log(i)
  }
}
//ES6
  let fun = () => {
    console.log('lalalala');
}

// 通过 CommonJS 规范导出 show 函数
module.exports = {
  show: show,
  closure: closure,
  fun:fun
};

监听8080端口运行结果如下
在这里插入图片描述

TypeScript

TypeScript 是 JavaScript 的一个超集，主要提供了类型检查系统和对 ES6 语法的支持，但不支持新的 API。
TypeScript 官方提供了能把 TypeScript 转换成 JavaScript 的编译器。你需要在当前项目根目录下新建一个用于配置编译选项的 tsconfig.json 文件，编译器默认会读取和使用这个文件，配置文件内容大致如下：

{
  "compilerOptions": {
    "module": "commonjs", // 编译出的代码采用的模块规范
    "target": "es5", // 编译出的代码采用 ES 的哪个版本
    "sourceMap": true // 输出 Source Map 方便调试
  },
  "exclude": [ // 不编译这些目录里的文件
    "node_modules"
  ]
}

综上，相关 Webpack 配置如下：

const path = r`在这里插入代码片`equire('path');

module.exports = {
  // 执行入口文件
  entry: './main',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist'),
  },
  resolve: {
    // 先尝试 ts 后缀的 TypeScript 源码文件
    extensions: ['.ts', '.js'] 
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: 'awesome-typescript-loader'
      }
    ]
  },
  devtool: 'source-map',// 输出 Source Map 方便在浏览器里调试 TypeScript 代码
};

在运行构建前需要安装上面用到的依赖：

npm i -D typescript awesome-typescript-loader