npm包babel-plugin-s2s-action-root-ts使用教程

前言

我们在前端开发时会用到许多工具来辅助我们完成任务。其中，npm包是开发过程中极为重要的一种工具，在此我们来介绍一个npm包——babel-plugin-s2s-action-root-ts。

babel-plugin-s2s-action-root-ts是什么？

babel-plugin-s2s-action-root-ts是一个基于babel的插件，可以帮助我们在typescript中快速创建redux actions，提高编码效率。

如何使用babel-plugin-s2s-action-root-ts？

下面是使用该插件的详细步骤：

安装

在终端中输入以下命令安装

npm i babel-plugin-s2s-action-root-ts -D

配置

在.babelrc文件中增加以下内容：

-- -------------------- ---- -------
---------- -
    -------- --------
    -
        ---------------------
        -
            ----------------- ---------------------- -- ------ -----------
            ------------- ---------------- -- ------------
            -------------------- ------------------------- -- ------ -------------
            ---------- -- -- ----------
        -
    -
-
展开代码

编写代码

在指定的目录下创建一个名为modules.js的文件。

例如，我们在./app/actions/modules.js中输入以下代码：

// 一个简单的action模块
export const FETCH_DATA = 'fetchData'

// 更多 action 模块
// export const SOMETHING = 'something'

在./app/actions/types目录下创建名为fetchData.js的文件。如下：

export const FETCH_DATA_REQUEST = 'FETCH_DATA_REQUEST'

export const fetchDataRequest = () => ({
  type: FETCH_DATA_REQUEST
})

在./app/actions/creators目录下创建名为fetchData.js的文件，如下：

import { FETCH_DATA_REQUEST } from '../types/fetchData'

export const fetchData = () => ({
  type: FETCH_DATA_REQUEST
})

运行

最后，在终端中输入以下命令启动编译：

npm run build

结果

在运行上述命令后，./app/actions下会生成如下代码：

import { FETCH_DATA_REQUEST } from './types/fetchData'

export const fetchData = () => ({
  type: FETCH_DATA_REQUEST
})

示例代码

下面是一个完整的例子，供大家参考：

modules.js：

export const FETCH_DATA = 'fetchData'

fetchData.js：

export const FETCH_DATA_REQUEST = 'FETCH_DATA_REQUEST'

export const fetchDataRequest = () => ({
  type: FETCH_DATA_REQUEST
})

fetchData.js

import { FETCH_DATA_REQUEST } from '../types/fetchData'

export const fetchData = () => ({
  type: FETCH_DATA_REQUEST
})

最后，在终端中运行npm run build，就可以生成如下代码：

import { FETCH_DATA_REQUEST } from './types/fetchData'

export const fetchData = () => ({
  type: FETCH_DATA_REQUEST
})

结语

babel-plugin-s2s-action-root-ts是一个非常好用的npm包，使用它能够大大提高我们的编码效率。希望本篇文章对大家有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c8681e8991b448e5ff5