简介
hey-joe 是一个用于构建 Web 组件化开发的 npm 包。它提供了一些基本的工具和规范，让前端开发者可以更加方便地构建组件化应用。
hey-joe 的功能包括：
- 组件开发环境的初始化和配置；
- 组件样式的管理和打包；
- 组件 JavaScript 代码的模块化和打包；
- 组件资源的加载和路径映射。
安装
npm install hey-joe --save-dev
初始化
在项目目录下，运行以下命令初始化 hey-joe 环境：
npx hey-joe init
运行该命令后，hey-joe 将会为你创建以下目录结构：
. ├── src/ │ └── index.js └── hey-joe.config.js
其中，src 目录是你组件的代码目录，index.js 是你组件的入口文件。hey-joe.config.js 是 hey-joe 的配置文件，你可以在这里配置 hey-joe 的行为。
配置
在 hey-joe.config.js 文件中，你可以配置如下选项：
entry
类型： string 或 Array<string>
默认值： "./src/index.js"
指定组件的入口文件或入口文件数组。
output
类型： Object
默认值：
{
libraryTarget: 'umd',
path: path.join(process.cwd(), 'dist'),
filename: 'index.js',
umdNamedDefine: true
}指定组件生成的 JavaScript 文件的路径和文件名。你也可以在 output 中自行指定其他选项，比如 library 名称、生成文件的模式等。
resolve
类型： Object
默认值：
{
alias: {
"@": path.join(process.cwd(), "src"),
}
}表示 hey-joe 对于组件中文件路径的解析方式。
style
类型： Object
默认值：
{
import: [
'@/index.scss',
],
includePaths: [
process.cwd()
]
}指定组件样式文件的路径。style.import 选项表示入口样式文件数组，style.includePaths 表示样式文件中 Sass/SCSS 预处理器 import 的根目录。
eslint
类型： Object
默认值：
{
enable: true,
options: {
fix: false,
emitWarning: true,
}
}表示 hey-joe 在组件开发时是否启用 ESLint 检测。
ignore
类型： Array<RegExp>
默认值：
[/node_modules/]
表示 hey-joe 在打包时需要忽略的文件或目录。默认情况下忽略 node_modules 目录。
使用
在你的组件入口文件（默认是 src/index.js）中，你可以使用 ES6 模块化的方式编写代码：
import React from 'react'
import ReactDOM from 'react-dom'
const App = () => {
return <h1>Hello, world!</h1>
}
ReactDOM.render(<App />, document.getElementById('root'))在你的组件样式文件（默认是 src/index.scss）中，你可以编写 Sass/SCSS 样式：
$primary-color: #007bff;
body {
background-color: $primary-color;
color: white;
}在你的组件中引用其它文件时，可以使用路径别名：
import MyComponent from '@/components/MyComponent.js'
构建
在项目目录下，运行以下命令构建你的组件：
npx hey-joe build
运行该命令后，hey-joe 将会读取你的 hey-joe.config.js 文件并按照其中的配置生成打包后的组件。生成的组件将会存储在 dist 目录下。
总结
hey-joe 是一个便于前端组件化开发的 npm 包，它提供了一系列的基本工具和规范，让前端开发者可以轻松地构建组件化应用。通过简单的配置，你可以使用 hey-joe 来快速构建你的组件库并打包部署。如果你在前端组件化开发上有所困扰，不妨试试 hey-joe 吧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a4381e8991b448d7e2c