@huxy/pack

1.5.3 • Public • Published

@huxy/pack

GitHub license npm version npm

@huxy/pack 是一个项目构建工具,集成了 esbuildeslintstylelintjestcommitlinthuskystandard-versionpostcssprettier,提供开发环境、构建打包、本地启动服务、环境配置、代理配置等功能。使用简单方便,功能齐全,配置灵活,可自己添加需要的功能插件。

运行时会自动生成插件配置文件,如 babel.config.cjs 文件等,可自行修改覆盖。

生成项目配置文件 .huxy/app.configs.js ,用户自行配置即可。

app.configs

用户环境配置:

const app = {
  // entry: 'app', // 项目入口目录,默认 app 文件夹
  // HOST: 'http://localhost', // 本地运行
  PORT: 8080, // 本地开发环境端口
  PROD_PORT: 8081, // 本地生产环境端口
  PUBLIC_DIR: 'public', // public 文件路径
  BUILD_DIR: 'build', // 构建产物路径
  DEV_ROOT_DIR: '/', // 开发环境 basepath
  // PROD_ROOT_DIR: '/huxy', // 生产环境 basepath
  projectName: 'XX平台', // 名称,页面初始化 title
  /* PROXY: { // 代理配置
    url: 'http://127.0.0.1:9000',
    prefix: '/api',
  }, */
  envConfigs: { // 全局环境变量
    name: '项目名',
    _id: '其它属性',
  },
};

const webpack = { // webpack 配置
  // ... // 基础配置
  dev: { // 开发环境配置
    // ...
  },
  prod: { // 生产环境配置
    // ...
  },
};

const nodeServer = app => { // 本地 nodejs 服务配置
  app.get('/local/test', (req, res, next) => {
    console.log(req);
  });
};


export default {
  app,
  webpack,
  nodeServer,
};

// 例如

export default {
  app,
  webpack: (rootPath, appPath) => ({
    resolve: {
      alias: {
        '@huxy': `${rootPath}/playground/huxy`,
      },
    },
    prod: {
      copy: [ // 拷贝文件
        {
          from: `${appPath}/public/robots.txt`,
          to: `${appPath}/build/robots.txt`,
        },
      ],
      buildConfigs: {
        target: 'es2018',
        minify: true,
      },
    },
  }),
};
  • copy:构建完成拷贝文件或文件夹。
  • buildConfigs:打包资源配置,见 esbuild 配置项。

webpack 配置项可以是一个配置对象,也可以是一个带有 rootDirappPath 的回调函数。当要使用到路径时,请使用回调函数来获取根目录路径和 app 路径。

运行命令

"start": "pack start",
"build": "pack run build",
"analyze": "pack run analyze",
"server": "pack run server",
"test": "pack run test",

其它 npm 命令:

"eslint": "pack eslint 'app/**/*.{js,jsx}'", // 或直接使用 eslint
"eslint-common": "eslint 'common/**/*.{js,jsx}'",
"stylelint": "stylelint 'app/**/*.{css,less}'",
"lint-fix": "eslint --fix 'app/**/*.{js,jsx}' && stylelint --fix 'app/**/*.{css,less}'",
"prettier": "prettier 'app/**/*' --write --ignore-unknown",
"release": "standard-version"

使用

新建一个项目,创建 publicapp 目录。

  • public:静态资源目录,存放 index.htmlfavicon 等。可使用 app.configs 里面的 PUBLIC_DIR 来配置路径,默认 public 放在 app 目录里面。
  • app:存放项目代码文件,也是入口文件夹。可自己命名,如 src,在配置文件里配置 entry: 'src' 即可。

安装 @huxy/pack

npm i -D @huxy/pack

然后在 package.json 里面创建上面运行命令里的 scripts ,就可运行了。

版本 0.6+ 使用了 esmodule,只需在 package.json 里面设置 "type": "module" 即可。

Package Sidebar

Install

npm i @huxy/pack

Weekly Downloads

54

Version

1.5.3

License

MIT

Unpacked Size

56.9 kB

Total Files

47

Last publish

Collaborators

  • ihuxy