在现代的前端项目开发中，我们经常需要将一些样式或组件打包成通用的 npm 包，以便于多个项目或团队之间的交叉使用。在这个过程中，我们经常需要编写一些重复性高、复杂度较低的代码。而 npm 包 generator-exporter 就是一个较好的解决方案，它可以帮助我们快速地生成通用的 npm 包项目骨架代码，减少编写重复性代码的时间和精力。
安装和使用
在使用 generator-exporter 之前，我们需要先确保电脑上安装了 Node.js 和 Yeoman。如果没有安装，可以先前往官网下载并安装。
然后，在终端中输入以下命令，即可安装 generator-exporter：
npm install -g generator-exporter
安装完成后，我们就可以使用 generator-exporter 了。在终端中进入项目的根目录，输入以下命令：
yo exporter然后按照提示进行操作即可生成通用的 npm 包项目骨架代码。
项目结构
使用 generator-exporter 生成的项目结构如下所示：
-- -------------------- ---- ------- - --- ------- --- --------- --- ------------ --- --- --- --- -------- --- --- ---- --- --- --- ---------- --- --- ------ --- --- --- ---------- --- --- --- ---------- --- --- ---------- --- --- --- -------------- --- --- --- -------- --- --- ---- --- --- ------------- --- --------- - --- ------------- - --- ------------ - --- ------------- - --- ---------------- --- -----------------展开代码
其中，
index.js是包的入口文件。demo文件夹是一个简单的示例，包含了使用该包的 Demo 页面。styles文件夹包含了该包的公共样式文件。components文件夹包含了该包的组件。test文件夹包含了该包的测试代码。templates文件夹包含了该包的模板，用于生成项目文件。webpack.config.js是该包的 webpack 配置文件。
示例代码
为了更好地说明 generator-exporter 的使用方法和作用，下面对其生成的项目结构进行一下说明，以及展示一下该包的使用示例。
入口文件（index.js）
在入口文件中我们需要导出该包的组件和样式。在 generator-exporter 生成的项目中，入口文件 content 如下：
import HelloWorld from './components/HelloWorld.vue'; import './styles/index.scss'; export { HelloWorld };
组件（components）
在组件文件夹中提供了一个简单的 HelloWorld 组件，示例代码如下：
-- -------------------- ---- ------- ---------- ---- -------------------- ------ --- ------- ------ ----------- -------- ------ ------- - ----- ------------- ------ - ---- ------ - -- --------- ------ ----------- ------- ------------ - ----------- ------- -- - ------ -------- - - --------展开代码
样式（styles）
在样式文件夹中提供了一个 _core.scss 文件，用于包含该包的公共样式。示例代码如下：
// _core.scss // Base Variables $primary-color: #ff0000; $secondary-color: #00ff00; $tertiary-color: #0000ff;
Demo 页面（demo）
在 demo 文件夹中提供了一个简单的 Demo 页面 index.html。
-- -------------------- ---- ------- --------- ----- ------ ------ ----- --------------- -- ----- ---------------------------- ----------------- -- ----------- ------------ ----- --------------- ---------------------------- ---------------- -- ----- ---------------- ------------------------------- -- ------- ------ ----------------- ------------------- ---- --------- ------------ ------------ -- ---- ------ ---- -- ------ ------- -------------------------------- ------- -------展开代码
测试代码（test）
在测试文件夹中提供了一个简单的测试案例（index.test.js）。
-- -------------------- ---- ------- ------ - ------ - ---- ------- ------ - ------------ - ---- ------------------ ------ ---------- ---- ------------------------------ -------------- ---------------- -- -- - ----------- --------- ---- -------- -- -- - ----- --- - ---- --------- ----- ------- - ------------------------ - ---------- - --- - --- --------------------------------------- --- ---展开代码
总结
npm 包 generator-exporter 是一个非常实用的 npm 包，它可以帮助我们快速地生成通用的 npm 包项目骨架代码，减少编写重复性代码的时间和精力。在使用过程中，需要注意生成项目结构，以及如何导出包的组件和样式。同时，为了保证 npm 包的质量，我们还需要编写测试案例进行测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557bf81e8991b448d4c8a
