@krmao/react-basic/README.md

### features

## [@krmao/react-basic](https://www.npmjs.com/package/@krmao/react-basic)

### features

-   compose multi plugins
    -   concat every webpack function
    -   the config order is plugin config > globalNextConfig, but concat webpack function
-   basic components
-   basic utils
-   basic styles
-   BSD-3 license
-   es6 code source and no compile/build for es5/commonjs
-   only compact nextjs now
-   dependency on next-transpile-modules

### install

> npm i @krmao/react-basic@x.y.z --registry http://registry.npmjs.org

```js
// next.config.js
const nextConfig = {};
const withBundleAnalyzer = require("@next/bundle-analyzer")({enabled: process.env.ANALYZE === "true"});
const withLess = require("next-with-less");
const BasicLoader = require("@krmao/react-basic/dist/builder/basic-loader");
BasicLoader.debug = true;
// https://github.com/martpie/next-transpile-modules/pull/248
// const withTM = require("next-transpile-modules")(["@krmao/react-basic"]);
module.exports = BasicLoader.composePlugins(
    [
        // withTM,
        withBundleAnalyzer,
        //region https://github.com/elado/next-with-less
        [
            withLess,
            {
                lessLoaderOptions: {
                    lessOptions: {modifyVars: {}}
                }
            }
        ]
        //endregion
    ],
    nextConfig
);
```

```js
// _app.js

import "@krmao/react-basic/dist/builder/basic-global.css";
import "@krmao/react-basic/dist/builder/basic-global-vars.css";
import "@krmao/react-basic/dist/builder/basic-global-vars-antd.less";
// Global CSS cannot be imported from files other than your Custom <App>.
// CSS Modules cannot be imported from within node_modules.
import "@krmao/react-basic/dist/index.css";

import Basic, {BasicLayout, BasicReactUtil} from "@krmao/react-basic";

Basic.init({
    website: {
        domains: {
            prod: "http://api.codesdancing.com",
            uat: "http://uat.api.codesdancing.com",
            dev: "http://a.uat.api.codesdancing.com"
        },
        page: {
            pageUrlRepo: BusinessPageUrl
        },
        title: "NEXTJS",
        menus: [
            {
                title: "Home",
                alias: "首页",
                icon: <HomeOutlined />,
                path: "/"
            },
            {
                title: "FilmList",
                alias: "电影列表",
                icon: <BusinessSvgVideoCamera />,
                path: "/filmlist"
            }
        ]
    },
    api: {
        domains: {
            prod: "http://api.codesdancing.com",
            uat: "http://uat.api.codesdancing.com",
            dev: "http://a.uat.api.codesdancing.com"
        },
        prefix: "/api",
        apiRepo: BusinessApi,
        code: 200,
        timeout: 15 * 1000
    }
});
```

### publish

-   npm config set registry https://registry.npmjs.org # 必须
-   npm login # krmao,Ns#0
-   npm publish --access=public
-   npm unpublish --force

### test local

> npm link ../react-basic

### others

-   [如何选择开源许可证？](http://www.ruanyifeng.com/blog/2011/05/how_to_choose_free_software_licenses.html)
-   [how to config npm package with es6](https://whitep4nth3r.com/blog/how-to-build-test-and-release-node-module-es6)
-   [publish es6 react modules to npm](https://www.pluralsight.com/guides/publish-es6-react-modules-to-npm)
-   https://juejin.cn/post/6863705400773083149
-   [peerDependencies Automatic](https://github.com/martpie/next-transpile-modules/pull/248)
-   [如何通过 babel 配置使用可选链`?.`和双问号`??`](https://www.jianshu.com/p/bca4ce835caf)
-   how to use babel

    ```
    npm install --save-dev @babel/cli @babel/core @babel/preset-env @babel/preset-react

    // .babelrc
    {
        "presets": [
            "@babel/preset-env",
            "@babel/preset-react"
        ]
    }
    // package.json
    {
        "scripts": {
            "build": "rm -rf dist && babel src -d dist",
            "publish": "npm run build && npm publish --access=public"
        }
    }
    ```