npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@stonehiy/cli-service

v1.0.0-beta.6

Published

:hammer_and_wrench: megalo的开箱即用webpack小程序脚手架配置,内置megalo生态的部分插件,并提供用户自定义配置的入口(对标vue-cli 3)

Downloads

2

Readme

@megalo/cli-service 1.x版本

:hammer_and_wrench: megalo的开箱即用webpack小程序脚手架配置,内置megalo生态的部分插件,并提供用户自定义配置的入口

完整文档地址: https://megalojs.org/#/cli/cli-service

特性

  • 零配置可用
  • 可根据自己的需求修改webpack原始配置
  • 内置了小程序项目常用的基础设施配置,满足基本需求
  • 项目配置分离,零耦和,配置插件化
  • typescript 支持
  • 插件系统

注意

老项目注意 >>> @megalo/cli-service 1.0.0版本的api于 0.x的版本不兼容,使用方式有差异,0.x版本的点击这里

安装

@megalo/cli-service 依赖 @megalo/babel-preset-app@megalo/target@megalo/template-compiler

npm i @megalo/babel-preset-app  @megalo/target @megalo/template-compiler @megalo/cli-service -D

使用

在项目根目录的package.json文件中的scripts选项加上一条:

"scripts": {
  "dev:wechat": "megalo-cli-service serve"
}

运行命令:

npm run dev:wechat

控制台参数

https://megalojs.org/#/cli/cli-service

修改配置

如果你觉得webpack配置不满足项目需求,你可以在项目根目录下,新建一个megalo.config.js文件,书写自己的配置并导出,目前该配置文件的默认配置如下(均为选填):

module.exports = {
  // 构件生产模式时是否启用sourcemap配置(仅在process.env.NODE_ENV === 'production' 时该选项生效)
  productionSourceMap: false,

  // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
  lintOnSave: true,

  chainWebpack: chainConfig => {
    // 你可以在这里通过 https://github.com/neutrinojs/webpack-chain 来精细的修改webpack配置
    console.log('chainWebpack执行了', chainConfig.toString())
  },

  configureWebpack: config => {
    // 你可以在这里修改webpack的配置并返回,或者直接创建一个新的webpack配置对象返回;
    // 你的配置将被 webpack-merge 合并 (https://github.com/survivejs/webpack-merge)
    return config
  },
  // 原生小程序组件存放目录,默认为src/native
  // 如果你有多个平台的原生组件,你应当在此目录下再新建几个子文件夹,我们约定,子文件夹名和平台的名字一致:
  // 微信小程序组件则命名为 'wechat',支付宝为'alipay', 百度为 'swan'
  // 如果只有一个平台,则无需再新建子文件夹
  nativeDir: '/src/native',

  // 文档同 https://cli.vuejs.org/zh/config/#css-loaderoptions
  css: {
    loaderOptions: {
      css: {
        // https://github.com/webpack-contrib/css-loader#options
      },
      less: {
        // https://github.com/webpack-contrib/less-loader
      },
      sass: {
        // https://github.com/webpack-contrib/sass-loader
      },
      stylus: {
        // https://github.com/shama/stylus-loader
      },
      // 若不想使用 px2rpx 插件,则设置为 px2rpx: false 即可
      px2rpx: {
        // https://github.com/megalojs/megalo-px2rpx-loader
        rpxUnit: 0.5
      }
    }
  }
}

插件系统

@megalo/cli-service 从 1.0.0-beta.1 起, 支持插件系统 插件开发文档

已内置的megalo周边webpack配置

以下使用以下 megalo 周边库时,直接 npm i 库名 即可,无需更改 webpack 配置,直接使用:

内置的其他的 webpack 配置:

  • 环境变量设置、替换
  • css-loader、less-loader、sass-loader、stylus-loader等 css预编译相关配置
  • file-loader 处理图片资源文件
  • babel 转 es5
  • 编译、压缩、混淆等

注意

@megalo/cli-service 默认会读取 src 目录下的 app.jsmain.jsindex.jsapp.tsmain.tsindex.ts 其中之一并将其作为入口文件

demo

更新记录

  • [ 1.0.0-alpha.18 ] 支持头条小程序
  • [ 1.0.0-beta.1 ]
    • 剥离webpack配置,支持插件系统
    • 新增 cli-plugin-mpcli-plugin-webcli-plugin-eslintcli-plugin-typescript 插件
    • 编译小程序为H5(目前周边设施还不完善)
    • 默认新增webpack对fonts、媒体文件等静态资源的webpack配置
    • 优化分包静态资源输出路径,主包的图片(images)、字体(fonts)、媒体文件(media)输出到 dist-${platform}/static/${fileType}/ 目录下;分包的输出到dist-${platform}/${packageName}/static/${fileType}目录下