前言
在前端开发中，模块化已经成为了必不可少的一部分。随着浏览器对 ES6 语法的支持，ES6 模块化成为了前端开发中比较流行的一种模块化方案。然而，在实际项目中，常常需要将 ES6 模块化代码打包成能够在浏览器中直接使用的代码，这就需要借助于打包工具。而 @pkgr/es-modules 就是一个基于 Rollup 和 Babel 的打包工具，专门用于将 ES6 模块化代码打包成浏览器可以直接使用的代码。
安装 @pkgr/es-modules
安装 @pkgr/es-modules 十分简单，只需要在项目中执行以下命令即可：
npm install @pkgr/es-modules -D
使用 @pkgr/es-modules
安装完成后，我们需要在项目中创建一个配置文件 pkgr.config.js，该配置文件中可以对 @pkgr/es-modules 进行配置，以满足我们实际项目的需求。下面是一个简单的配置文件示例：
-- -------------------- ---- -------
-------------- - -
------ ---------------
------- --
------- ------
----- --------
----- ---------------
---
-------- --
-上面的配置文件中，我们指定了一个输入文件 src/index.js，指定了一个输出文件 dist/myLib.js，输出文件格式为 umd，输出的变量名称为 myLib。
同时，我们还可以添加一些插件，以满足我们实际项目的需求。比如说，我们需要在打包时使用 Babel 进行转码，我们可以添加 @pkgr/plugin-babel 插件，在配置文件中添加：
const babelPlugin = require('@pkgr/plugin-babel')
module.exports = {
// ...
plugins: [babelPlugin({
presets: ['@babel/preset-env']
})]
}上面的代码中，我们使用 @pkgr/plugin-babel 插件，并使用了 @babel/preset-env 预设配置进行转码。
使用示例
下面是一个具体的使用示例，我们在 src/index.js 中定义了一个常量和一个函数，然后通过 @pkgr/es-modules 打包成浏览器可用的代码：
// src/index.js
export const PI = 3.141592653589793
export function square(x) {
return x * x
}-- -------------------- ---- -------
-- --------------
-------------- - -
------ ---------------
------- --
------- ------
----- --------
----- ---------------
---
-------- --
-执行 npx pkgr 命令进行打包，打包完成后，可以在项目的 dist 目录下找到打包好的文件 myLib.js。
最后，我们可以通过以下方式在浏览器中使用 myLib.js：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ---------------- ----------
-------
------
------- -------------------------------
--------
--------------------- -- -----------------
---------------------------- -- -
---------
-------
-------总结
@pkgr/es-modules 是一个非常实用的打包工具，它可以将 ES6 模块化代码打包成浏览器可用的代码，并且可以通过配置文件进行灵活的配置，满足不同项目的需求。使用 @pkgr/es-modules 可以让我们在前端开发中更加便捷地使用 ES6 模块化语法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/pkgr-es-modules