framework-for-react

介绍

framework-for-react

安装教程

1. npm install -D framework-for-react

使用说明

1. 这是一个针对react18，使用webpack5进行打包的简洁工具包，包含babel预置v7，各种预置loader，react-router, axios 等工具，开箱即用
2. 使用示例

*** dev.js ***
const { webpackConfig, devServerConfig, startServer } = require('framework-for-react');
// modify loader, eg: jsx-loader
webpackConfig.module.rules.forEach(i => {
  if (i.test.toString() == /\.jsx?$/) {
    // todo vue
  }
});
// copywebpack plugin
webpackConfig.plugins.push(
  new CopyWebpackPlugin({
    patterns: [
      { from: 'xxx', to: 'xxx' },
    ]
  })
);
devServerConfig.port = '8080';
devServerConfig.host = '127.0.0.1';
devServerConfig.proxy = {
  '/': {
    target: 'http://x.xx.xxx/api', // 后端接口
    secure: false, // 是否验证SSl证书
    changeOrigin: true,
    bypass: function(req, res, proxyOptions) {
      console.log(proxyOptions.target, req.originalUrl)
    }
  }
};

// start dev server on host:port
startServer(webpackConfig, devServerConfig);

*** build.js ***
const { webpackConfig } = require('framework-for-react');
// modify loader, eg: vue-loader
webpackConfig.module.rules.forEach(i => {
  if (i.test.toString() == /\.vue$/) {
    // todo vue
  }
});
// copywebpack plugin
webpackConfig.plugins.push(
  new CopyWebpackPlugin({
    patterns: [
      { from: 'xxx', to: 'xxx' },
    ]
  })
);
module.exports = webpackConfig;

*** package.json ***
"script": {
  "dev": "cross-env NODE_ENV=development node ./dev.js",
  "build": "cross-env NODE_ENV=production webpack --config ./build.js",
}