@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
// 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 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" } }