@wxa

wxa-cli

NPM version

为小程序开发定制的命令行工具

mind-node

特性

  • Npm支持
  • 原生开发模式
  • Vue单文件开发模式
  • 插件机制
  • 个性化编译器
  • 原生组件支持
  • 第三方原生组件
  • 调用微信开发者工具

安装

使用 npm 安装: npm i -g @wxa/cli

用例

  1. 基础编译 wxa build

  2. 监听模式 wxa build --watch

  3. 指定无效缓存以及打印更详细的构建信息 wxa build --no-cache --verbose

  4. 使用模板创建新项目, template wxa create base projectname

  5. 调用微信开发者工具, windows用户需要在wxa.config.js设置开发者工具的路径wechatwebdevtools

  • wxa cli open: 打开开发者工具
  • wxa cli preview: 预览项目
  • wxa cli upload -m 'upload msg' --ver 'verion': 上传项目
  • wxa cli login: 登录微信，preview和upload都需要登录微信后操作

配置

核心的配置文件是wxa.config.js,一般来讲都是长下面这样:

const path = require('path');
const UglifyjsPlugin = require('@wxa/plugin-uglifyjs');
const ReplacePlugin = require('@wxa/plugin-replace');
let prod = process.env.NODE_ENV === 'production';
const envlist = []; // your env configurations

module.exports = {
    wechatwebdevtools: '/Applications/wechatwebdevtools.app', // path to your wechat dev tool
    resolve: {
        alias: {
            '@': path.join(__dirname, 'src'),
        },
    },
    use: ['babel', 'sass', 'stylus'],
    compilers: {
        sass: {
            // compiler options
        },
    },
    plugins: [
        new ReplacePlugin({
            list: envlist,
        }),
    ],
};

if (prod) {
    module.exports.plugins.push(new UglifyjsPlugin());
}

配置项

use

指定加载对应的compiler如babel，则cli将自动加载项目依赖中的@wxa/compiler-babel。 目前支持的compiler有：

compilers

个性化compiler的配置

resolve

解析配置

  • alias：别名，仅解析js的时候生效

plugins

插件，cli通过使用webpack最新的tapable实现插件机制 目前支持的插件有：

编辑器

推荐使用 vsCode，原来写代码可以如此顺畅. 推荐使用 vetur 高亮.wxa 文件. 下面是推荐的vscode项目配置：

{
    "javascript.implicitProjectConfig.experimentalDecorators": true,
    "vetur.grammar.customBlocks": {
    "config": "json"
  },
  "vetur.validation.template": false,
  "eslint.enable": true
}

以及一些eslint的配置示例：

{
    "extends": [
        "./node_modules/eslint-config-google/index.js"
    ],
    "root": true,
    "env": {
        "commonjs": true,
        "es6": true,
        "node": true
    },
    "parser": "vue-eslint-parser",
    "parserOptions": {
        "parser": "babel-eslint",
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true
        },
        "ecmaVersion": 2017,
        "sourceType": "module"
    },
    "rules": {
        "vue/valid-template-root": "off",
        "no-const-assign": "warn",
        "valid-template-root": "off",
        "no-this-before-super": "warn",
        "no-undef": "warn",
        "no-unreachable": "warn",
        "no-unused-vars": "warn",
        "constructor-super": "warn",
        "valid-typeof": "warn",
        "one-var": "warn",
        "max-len": "off",
        "no-trailing-spaces": "off",
        "require-jsdoc": "warn",
        "camelcase": "warn",
        "no-invalid-this": "warn",
        "new-cap": "warn",
        "guard-for-in": "warn"
    }
}

模板

模板用于创建新的wxa项目 目前支持的模板：

  1. Base Template

原生组件解析

wxa支持项目直接从npm中引入第三方的组件！

// in your page's config.json
{
    "usingComponents": {
        "counting": "@wxa/ui/src/components/counting"
    }
}

编译后的结果为：

{
    "usingComponents": {
        "counting": "./../npm/@wxa/ui/src/components/counting"
    }
}

wxa-ui也在不断完善中

在 GitHub 上编辑此页