babel-plugin-mobx-deep-action

假设，把动作内部创建的所有代码视为动作来处理，不用在单独使用 action 标记异步函数。

插件会扫描全部函数，标记 action，然后使用相应的 action 包裹其内部函数。

• 使用 async and generator 函数
• Typescript 装饰模式
• 使用其他包

例子

输入

1import { action } from "mobx";
2
3action(function doSome() {
4  fetch("/api/list").then(function(response) {
5    this.items = response.dta;
6  });
7});

输出

1"use strict";
2
3import { action } from "mobx";
4
5action(function doSome() {
6  fetch("/api/list").then(action(function(response) {
7    this.items = response.dta;
8  }));
9});

警告

插件支持 ES6 的 import，如果没有使用 makeAutoObserver 需要导入了 action 才能支持使用。

如果使用了 makeAutoObserver 可以不用导入 action，我已处理。

只支持以下导入方式，如下:

import {action} from "mobx";

import {action as actionAlias} from "mobx";

import * as mobx from "mobx";

import * as mobxAlias from "mobx";

这些例子，不支持:

const mobx = require("mobx")

const {action} = require("mobx")

import * as mobx from "my-mobx-alias"

import * as mobx from "mobx";
const {action} = mobx;
action(function() {});

安装

1$ npm install babel-plugin-mobx-deep-action

使用

通过 .babelrc (推荐)

.babelrc

1{
2  "plugins": ["mobx-deep-action"]
3}

通过 babel 编译

1$ babel --plugins mobx-deep-action script.js

通过 babel node api 编译

1require("babel-core").transform("code", {
2  plugins: ["mobx-deep-action"]
3});

使用 async and generator 函数.

请看 https://github.com/Strate/babel-plugin-mobx-async-action

Typescript 装饰模式.

本插件可以通过装饰代码来绑定，并输出 typescript，如下：

1import * as tslib_1 from "tslib";
2import { action } from "mobx";
3export default class Class2 {
4    async method() {
5        const a = (other) => { };
6        return a(function () { });
7    }
8}
9tslib_1.__decorate([
10    action
11], Class2.prototype, "method", null);

要使代码正常运行，你需要设置编译配置importHelpers 和安装依赖包tslib。 并且, typescript 需要要输出 es6 modules，所以你应该把生产环境调到es2015+。插件会检查，如果导入了tslib 会绑定对应装饰代码。

使用其他包.

如果你使用了别名替换 mobx， 你快可以通过配置对应 plugin 的配置，如下：

.babelrc

1{
2  "plugins": [
3    ["mobx-deep-action", {
4      "mobx-package": "mobx-custom"
5    }]
6  ]
7}