@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/[email protected] --registry http://registry.npmjs.org

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

// _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

• 如何选择开源许可证？

• how to config npm package with es6

• publish es6 react modules to npm

• https://juejin.cn/post/6863705400773083149

• peerDependencies Automatic

• 如何通过 babel 配置使用可选链?.和双问号??

• 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"
      }
  }