介绍
在前端开发中，常常需要创建 JavaScript 版本的库或者组件。当我们完成了开发工作之后，需要将代码打包成具有兼容性的文件。这时候， @preconstruct/cli 就是一个非常好用的工具。它可以方便地将你的代码打包成 CommonJS、ESModules 和 UMD 等多种格式的文件，帮助你快速地发布你的 JavaScript 库或组件。
安装
首先，我们需要全局安装 @preconstruct/cli ：
npm install -g @preconstruct/cli
这会安装 @preconstruct/cli 和它的所有依赖。
使用
初始化项目
首先，在你的项目目录下执行以下命令：
preconstruct init
该命令会在项目目录下创建一个名为 .preconstruct 的文件夹，该文件夹用于配置项目的构建选项。
配置项目
你可以在 .preconstruct 文件夹中配置项目的构建选项。以下是一些常用的配置选项：
entrypoints
使用 entrypoints 配置选项可以指定你的代码的入口文件，并且可以将入口文件打包成多个格式的文件。例如：
{
"entrypoints": [
"src/index.js",
"src/another-entrypoint.js"
]
}这会将 src/index.js 和 src/another-entrypoint.js 打包成 CommonJS 和 ESModules 格式的文件。
outputFolder
使用 outputFolder 配置选项可以指定打包生成的文件输出的目录。例如：
{
"outputFolder": "dist"
}这会将所有打包生成的文件放在 dist 文件夹下。
babel
使用 babel 配置选项可以自定义 babel 的配置。例如：
{
"babel": {
"plugins": ["@babel/plugin-transform-runtime"]
}
}这会在使用 babel 打包代码时自动添加 @babel/plugin-transform-runtime 插件。
打包项目
配置好之后，你可以执行以下命令来打包你的项目：
preconstruct build
该命令会将 .preconstruct 文件夹中配置的入口文件打包成多种格式的文件，并将打包生成的文件输出到 .preconstruct/output 文件夹中。
发布项目
最后，你可以使用以下命令将你的项目发布到 npm 上：
npm publish
这样，你的代码就可以被其他人轻松地安装和使用了。
示例代码
以下是一个例子，展示了如何使用 @preconstruct/cli 来打包一个简单的 JavaScript 库。
首先，安装 @preconstruct/cli：
npm install -g @preconstruct/cli
然后，在一个名为 my-library 的新项目目录下执行如下命令：
preconstruct init
在 .preconstruct 文件夹下创建一个名为 index.js 的文件，并添加以下代码：
export function hello() {
console.log("Hello, world!");
}随后，配置 .preconstruct 文件夹下的 entrypoints 和 outputFolder 选项：
{
"entrypoints": ["src/index.js"],
"outputFolder": "dist"
}最后，执行以下命令来打包你的代码：
preconstruct build
打包完毕后，你的代码将被打包成 CommonJS、ESModules 和 UMD 等多种格式，并生成到 dist 文件夹下。此时，你可以将 dist 文件夹下的代码发布到 npm 上，供其他人使用。
以上就是使用 @preconstruct/cli 打包 JavaScript 代码的基本流程。@preconstruct/cli 的功能非常强大，你可以根据自己的实际需求来配置它的各种选项，以获得更好的打包效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcbabb5cbfe1ea0612650