简介
@concorde2k/core.makes 是一个方便快捷的工具，它能够帮助前端开发人员快速生成基础代码，例如 React 组件、Redux store、Vue 组件等，让开发者能够更加专注于业务实现。
安装
该 npm 包可通过以下命令进行安装：
npm install -g @concorde2k/core.makes
使用方法
生成 React 组件
打开命令行工具，进入项目中的组件目录
输入以下命令：
coremakes make:react ComponentName
- ComponentName：生成的组件名称
在组件目录中即可生成 ComponentName.js、ComponentName.scss、ComponentName.test.js 文件。
生成 Redux store
打开命令行工具，进入项目中存放 Redux 相关文件的目录
输入以下命令：
coremakes make:redux storeName
- storeName: 生成的 store 名称
在该目录中会生成 store.js、actionTypes.js、actions.js、reducers.js、selectors.js 五个文件。
生成 Vue 组件
打开命令行工具，进入项目中的组件目录
输入以下命令：
coremakes make:vue ComponentName
- ComponentName：生成的组件名称
在组件目录中即可生成 ComponentName.vue 文件。
生成 TypeScript 类
打开命令行工具，进入项目中存放类型文件的目录
输入以下命令：
coremakes make:typescript ClassName
- ClassName：生成的类名称
在该目录中会生成 ClassName.ts 文件。
示例代码
React 组件示例代码
-- -------------------- ---- ------- ------ ----- ---- -------- ------ --------- ---- ------------- ------ ----------------------- ----- ------------- - ------- -- - ------ - ---- --------------------------- ---------------- ------ -- -- ----------------------- - - --------- --------------- -- -------------------------- - - --------- ----- -- ------ ------- --------------展开代码
Redux store 示例代码
actionTypes.js
export const EXAMPLE_ACTION = 'EXAMPLE_ACTION';
actions.js
import * as actionTypes from './actionTypes'; export function exampleAction(payload) { return { type: actionTypes.EXAMPLE_ACTION, payload, }; }
reducers.js
-- -------------------- ---- ------- ------ - -- ----------- ---- ---------------- ----- ------------ - --- ------ ------- -------- -------------------- - ------------- ------- - ------ ------------- - ---- --------------------------- ------ - --------- ------------------ -- -------- ------ ------ - -展开代码
selectors.js
-- -------------------- ---- ------- -- -------------- -------------------- -- ----- ------- - ----- -- -------------- ------ ----- --- - - -------- ----- -- --------------- -- ----- ----------------------- - --------- -- -------- -- ------------------ ------ ----- -------------- - - -------- ------------------------------------ ------------- -- -- ---------- ---------------------- ---- --展开代码
Vue 组件示例代码
-- -------------------- ---- ------- ---------- ---- ----------------------- -- -------------- -- ------ ----------- -------- ------ ------- - ----- ---------------- -- --------- ------ ------------ --------------- -- --------展开代码
TypeScript 类示例代码
-- -------------------- ---- ------- ----- --------- - ------ ------ ------- ------------------ ------- - ---------- - ------ - ------ ---------------- -------- ------ - ------ ---------- - ------- - - ------ ------- ----------展开代码
结论
@concorde2k/core.makes 是一款非常实用的工具，它能够帮助前端开发者快速生成基础代码，从而节省时间和精力。在实际的项目中，这款工具能够大幅提高开发效率，也能够规范化代码结构、提高代码质量。建议开发者在日常开发中尝试使用该工具进行代码生成，提高自身的开发效率和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/161385
