原生小程序迁移到 wxa

wxa提供了一个方便好用的cli工具，使用cli可以从源站(目前是github)拉取手脚架，快速开始小程序开发。

注意

请注意node.js版本 >= 8.15.0

现有项目

原有的小程序项目可以不改动代码的情况下快速迁移到wxa下！只需要稍微加配置，旧的小程序项目一样可以享受@wxa提供的便利~

注意

迁移项目到wxa前注意备份代码, 方便迁移失败回退。例如git checkout -b backup

注意

请注意node.js版本 >= 8

1. 安装Cli

  1. # 全局安装@wxa/cli
  2. npm i -g @wxa/cli2

2. 安装项目依赖

注意

如果之前没有接入npm，则先运行npm init初始化。

  1. # 打开项目目录
  2. # cd path/to/your/project/
  4. # 安装依赖
  5. npm i @wxa/core @wxa/plugin-replace @wxa/plugin-uglifyjs @wxa/compiler-babel @wxa/compiler-sass babel-eslint @babel/preset-env @babel/plugin-transform-runtime @babel/runtime @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators cross-env

3. 添加配置

添加wxa.config.js到项目目录

  1.     const path = require('path');
  2.     const UglifyjsPlugin = require('@wxa/plugin-uglifyjs');
  3.     const ReplacePlugin = require('@wxa/plugin-replace');
  4.     let prod = process.env.NODE_ENV === 'production';
  5.     const env = process.env.NODE_ENV || 'development';
  7.     // 生产和测试环境参数配置
  8.     const envlist = require('./app.config')[env];
  9.     module.exports = {
  10.         // 指定微信开发者工具的目录，用于从cli调用其接口
  11.         wechatwebdevtools: '/Applications/wechatwebdevtools.app',
  12.         // 解析配置
  13.         resolve: {
  14.             alias: {
  15.                 '@': path.join(__dirname, 'src'),
  16.             },
  17.         },
  18.         // 使用到的compiler
  19.         use: [
  20.             {
  21.                 test: /\.js$|\.wxs$/,
  22.                 name: 'babel',
  23.                 options: {
  24.                     "sourceMap": false,
  25.                     "presets": ["@babel/preset-env"],
  26.                     "plugins": [
  27.                         ["@babel/plugin-transform-runtime", {"corejs": false, "version": "7.1.2"}],
  28.                         ["@babel/plugin-proposal-decorators", {"decoratorsBeforeExport": true}],
  29.                         ["@babel/plugin-proposal-class-properties"]
  30.                     ],
  31.                     "ignore": [
  32.                         "node_modules"
  33.                     ]
  34.                 }
  35.             }, {
  36.                 test: /\.sass$|\.scss$/,
  37.                 name: 'sass',
  38.             }
  39.         ],
  40.         // 使用到的plugins
  41.         plugins: [
  42.             new ReplacePlugin({
  43.                 list: envlist,
  44.             }),
  45.         ],
  46.     };
  47.     if (prod) {
  48.         module.exports.plugins.push(new UglifyjsPlugin());
  49.     }

4. 编译项目

  1. # watch模式编译项目
  2. wxa2 build --watch

4. 从微信开发者工具打开

在微信开发者工具中填入小程序appid，把目录指向path/to/your/project/dist。然后就可以开始wxa项目开发了！