如何使用 webpack 和 babel 将 js 文件编译为库答案

【问题标题】：How to compile a js file as library using webpack and babel如何使用 webpack 和 babel 将 js 文件编译为库
【发布时间】：2021-08-22 07:10:33
【问题描述】：

您好，我如何使用 webpack 将单个 js 类文件编译为库以生成可以包含在脚本标签中的输出

<script src='demo/demo.js'></script>

还有一个可以导入的输出

import demo from 'demo'

【问题讨论】：

标签： javascript webpack babel-loader

【解决方案1】：

如果你想在 AMD、CommonJS、Nodejs 等不同环境下使用demo 库。您需要使用output.library 选项并将其类型设置为'umd'。

此外，我们需要将output.globalObject 设置为'this' 的选项

当以库为目标时，尤其是 libraryTarget 为“umd”时，此选项指示将使用哪个全局对象来挂载该库。要使 UMD 构建在浏览器和 Node.js 上都可用，请将 output.globalObject 选项设置为 'this'。

一个例子：

demo/src/demo.js:

export class Demo {
  sayHello() {
    console.log("hello!");
  }
}

demo/webpack.config.js:

const path = require("path");

module.exports = {
  entry: "./src/demo.js",
  output: {
    path: path.resolve(__dirname, "lib"),
    filename: "demo.js",
    library: {
      name: "demo",
      type: "umd",
    },
    globalObject: "this",
  },
  mode: "development",
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
};

demo/package.json:

{
  "name": "demo",
  "version": "1.0.0",
  "main": "lib/demo.js",
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "babel-loader": "^8.2.2",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0"
  }
}

消费者方面

通过script标签在浏览器中使用demo库：

index.html:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script src='./demo/lib/demo.js'></script>
  <script>
    window.onload = () => {
      const { Demo } = window.demo;
      const demo = new Demo()
      demo.sayHello();
    }
  </script>
</body>

</html>

通过 ES6 import 语法在 index.js 文件中使用 demo。

index.js:

import { Demo } from "./demo/lib/demo";

const d = new Demo();
d.sayHello();

消费端webpack.config.js:

const path = require("path");

module.exports = {
  entry: "./index.js",
  output: {
    path: path.resolve(__dirname),
    filename: "index-bundled.js",
  },
  mode: "development",
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
};

生成index-bundled.js 文件后，运行node index-bundled.js。输出：

⚡  node index-bundled.js 
hello!

【讨论】：