零起点入门Webpack 06 - 创建一个Library

从零开始学习Webpack系列教程的第六章，我们将创建一个名为webpack-numbers的小型library，可以将数字1到5转换为文本表示，反之亦然。在这一章中，您将一步步学习如何创建library，包括处理Lodash依赖项。

前提条件

在开始之前，请确保您已经安装了以下软件：

• Node.js
• npm
• Webpack

如果您还没有安装这些软件，请访问相应的官方网站下载并安装。

创建项目

首先，创建一个新的Node.js项目。您可以使用以下命令：

mkdir webpack-numbers
cd webpack-numbers
npm init -y

这将创建一个新的Node.js项目，并安装必要的依赖项。

安装依赖项

接下来，我们需要安装webpack和Lodash依赖项。您可以使用以下命令：

npm install webpack --save-dev
npm install lodash --save

这将安装webpack和Lodash，并将它们添加到项目的package.json文件中。

创建library

现在，我们可以开始创建library了。在项目根目录下创建一个名为src的目录，并在其中创建一个名为index.js的文件。这是我们的library的入口文件。

在index.js文件中，添加以下代码：

const _ = require('lodash');

const numbers = {
  1: 'one',
  2: 'two',
  3: 'three',
  4: 'four',
  5: 'five',
};

const toText = (number) => {
  return numbers[number];
};

const toNumber = (text) => {
  return _.findKey(numbers, (value) => value === text);
};

module.exports = {
  toText,
  toNumber,
};

这段代码定义了一个名为webpack-numbers的library，它包含两个函数：toText和toNumber。toText函数将数字转换为文本表示，toNumber函数将文本表示转换为数字。

打包library

接下来，我们需要将library打包成一个可以被其他项目使用的文件。在项目根目录下创建一个名为dist的目录，并在其中创建一个名为index.js的文件。这是我们的library的打包文件。

在index.js文件中，添加以下代码：

const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname,
    filename: 'index.js',
    library: 'webpackNumbers',
    libraryTarget: 'umd',
  },
};

这段代码告诉webpack如何打包我们的library。entry属性指定了入口文件，output属性指定了输出文件。library和libraryTarget属性指定了library的名称和类型。

运行webpack

现在，我们可以运行webpack来打包我们的library了。在项目根目录下，运行以下命令：

webpack

这将打包我们的library，并生成一个名为index.js的文件。

使用library

现在，我们可以将我们的library导入到其他项目中使用了。在您希望使用library的项目中，安装webpack-numbers依赖项。您可以使用以下命令：

npm install webpack-numbers --save

这将安装webpack-numbers，并将它添加到项目的package.json文件中。

然后，您就可以在您的项目中使用webpack-numbers了。例如，您可以使用以下代码将数字2转换为文本表示：

const webpackNumbers = require('webpack-numbers');

const text = webpackNumbers.toText(2);

console.log(text); // 'two'

您也可以使用以下代码将文本表示'two'转换为数字：

const webpackNumbers = require('webpack-numbers');

const number = webpackNumbers.toNumber('two');

console.log(number); // 2

总结

在本教程中，我们学习了如何创建一个名为webpack-numbers的小型library，可以将数字1到5转换为文本表示，反之亦然。我们还学习了如何打包library并将其导入到其他项目中使用。