2.0.24 • Published 2 days ago

@kne/modules-dev v2.0.24

Weekly downloads
-
License
ISC
Repository
-
Last release
2 days ago

modules-dev

描述

用于辅助在项目内启动一个规范化组件开发的环境

安装

npm i --save @kne/modules-dev

概述

modules-dev为所有的项目提供了一个开发环境,让你在开发远程组件或者前端库时有一个运行时的示例展示,并且当对你的项目进行发布的时候可以集成到kne-union文档之中

modules-dev分为三个部分

  1. 构建工具部分,它在craco基础上封装了一系列插件用以支持文档解析已经远程组件支持
  2. Example部分,它给前端提供了一个集成化的开发环境用来实时预览组件的example部分
  3. 脚手架模板部分,它提供了两个命令行工具 modules-dev-create 和 modules-dev-libs-init,modules-dev-create可以在远程组件项目中添加一个新的组件即文档目录结构,modules-dev-libs-init可以给前端库提供一个可以运行的开发环境。

构建工具使用

  1. 远程组件 craco.config.js
const {CracoRemoteComponentsPlugin} = require("@kne/modules-dev");

module.exports = {
    plugins: [{
        plugin: CracoRemoteComponentsPlugin
    }]
};
  1. 组件库

example/craco.config.js

const {CracoLibsExamplePlugin} = require("@kne/modules-dev");

module.exports = {
    plugins: [{
        plugin: CracoLibsExamplePlugin
    }]
};

注意:以上代码通常由命令行工具生成,不需要自己编写

Example部分使用

  1. 远程组件库中

src/App.js

import createEntry from "@kne/modules-dev/dist/create-entry";
import "@kne/modules-dev/dist/create-entry.css";
import readme from "readme";

const ExampleRoutes = createEntry.ExampleRoutes;

const App = ({preset, themeToken, ...props}) => {
    return (<HashRouter>
        <ExampleRoutes
            {...props}
            paths={[{
                key: "components", path: "/", title: "首页",
            },]}
            preset={preset}
            themeToken={themeToken}
            readme={readme}
        />
    </HashRouter>);
};
  1. 业务项目中

src/bootstrap.js

if (process.env.NODE_ENV === 'development') {
    import('@kne/modules-dev/dist/create-entry.css');
    import('@kne/modules-dev/dist/create-entry').then(module => {
        const Entry = module.default(App);
        root.render(<Entry preset={globalPreset} projectName="erc" themeToken={globalPreset.themeToken}/>);
    });
} else {
    root.render(
        <BrowserRouter>
            <App/>
        </BrowserRouter>
    );
}

注意:以上代码通常由命令行工具生成,不需要自己编写

示例

示例代码

API

const {CracoRemoteComponentsPlugin,CracoLibsExamplePlugin,env} = require('@kne/modules-dev');

CracoRemoteComponentsPlugin

属性名说明类型默认值

CracoLibsExamplePlugin

属性名说明类型默认值

env

属性名说明类型默认值
import createEntry from '@kne/modules-dev/dist/create-entry';

const Entry = createEntry(children);
属性名说明类型默认值
2.0.24

2 days ago

2.0.22

18 days ago

2.0.23

18 days ago

2.0.21

18 days ago

2.0.20

30 days ago

2.0.19

1 month ago

2.0.17

1 month ago

2.0.18

1 month ago

2.0.15

2 months ago

2.0.16

2 months ago

2.0.14

2 months ago

2.0.13

2 months ago

2.0.11

2 months ago

2.0.12

2 months ago

2.0.9

2 months ago

2.0.10

2 months ago

2.0.8

2 months ago

2.0.7

2 months ago

2.0.6

3 months ago

2.0.6-alpha.0

3 months ago

2.0.3

3 months ago

2.0.2

3 months ago

2.0.5

3 months ago

2.0.4

3 months ago

2.0.2-alpha.0

3 months ago

2.0.2-alpha.1

3 months ago

2.0.0-alpha.0

3 months ago

2.0.1

3 months ago

2.0.0

3 months ago

1.1.4

3 months ago

1.1.3

3 months ago

1.1.1

3 months ago

1.1.0

3 months ago

1.0.6

3 months ago

1.1.2

3 months ago

1.1.0-alpha.1

3 months ago

1.1.0-alpha.2

3 months ago

1.1.0-alpha.0

3 months ago

1.1.0-alpha.3

3 months ago

1.0.5

3 months ago

1.0.4

3 months ago

1.0.2

3 months ago

1.0.1

3 months ago

1.0.3

3 months ago

1.0.0

3 months ago

0.1.27

3 months ago

0.1.25

3 months ago

0.1.26

3 months ago

0.1.23

4 months ago

0.1.24

4 months ago

0.1.22

4 months ago

0.1.21

4 months ago

0.1.20

9 months ago

0.1.15

9 months ago

0.1.16

9 months ago

0.1.17

9 months ago

0.1.18

9 months ago

0.1.19

9 months ago

0.1.10

1 year ago

0.1.11

12 months ago

0.1.12

11 months ago

0.1.13

11 months ago

0.1.14

11 months ago

0.1.12-alpha.0

11 months ago

0.1.9

1 year ago

0.1.8

1 year ago

0.1.7

1 year ago

0.1.6

1 year ago

0.1.5

1 year ago

0.1.4

1 year ago

0.1.3

1 year ago

0.1.2

1 year ago

0.1.1

1 year ago

0.1.0

1 year ago