npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@kne/modules-dev

v2.1.2

Published

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

Downloads

105

Readme

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);

| 属性名 | 说明 | 类型 | 默认值 | |-----|----|----|-----|