Jaraxxus

用此工具包可以快速创建一个 React 开发环境。提高项目创建效率。

Usage

• 创建 React 项目后，在根目录添加jaraxxus.config.js配置文件进行 webpack 的基本配置；（在 v4.0.0 版本后已经不需要 jaraxxus.config.js 文件了，会使用默认配置）
• jaraxxus start 命令用作 dev 环境；
• jaraxxus build 命令用作项目打包。
• dev 环境中需要 node >= 10.X

API

jaraxxus.config.js

module.exports = {
  entry: 'src/index.js', // webpack entry
  needPolyfill: true, // 是否需要自动引入polyfill
  publicPath: '/', // output.publicPath
  assetsDir: 'static', // 资源目录
  outputDir: 'dist', // 打包目录
  srcDir: 'src', // 开发目录
  eslintConfigFile: undefined, // eslint.rules.js为根目录文件
  indexPath: 'public/index.html', // SPA入口HTML
  favicon: 'public/favicon.ico', // 站点favicon
  productionSourceMap: false, // 生成环境是否需要sourcemap js
  configureWebpack: {}, // webpack 配置，最后通过webpack-merge合并配置
  bundleAnalyzerReport: false, // webpack-bundle-analyzer 是否启用
  devServer: {
    // 和devServer配置相同，可以全量配置
    publicPath: '/',
    port: 9999,
    clientLogLevel: 'info',
    historyApiFallback: true,
    compress: true,
    hot: true,
    open: true,
    overlay: { warnings: false, errors: true },
    contentBase: undefined,
    quiet: true,
  },
  css: {
    extract: true, // production 环境下，
    cssModules: false, // 是否启用css模块化
    sourceMap: false, // css sourceMap
    lessModifyVars: {}, // less modifyVars 配置
    loaderOptions: {
      style: {}, // style-loader options
    },
  },
};

配置 babel

此版本已经不需要额外的配置babel.config.js文件了。

如果需要额外的配置，默认使用babel中的extends配置项去拓展配置。

babel.config.js 参考文件

module.exports = {
  presets: [
    [
      require.resolve('@babel/preset-env'),
      {
        modules: false,
        targets: {
          browsers: [
            'last 3 versions',
            'ie >= 9',
            'ie_mob >= 10',
            'ff >= 30',
            'chrome >= 34',
            'safari >= 6',
            'opera >= 12.1',
            'ios >= 6',
            'android >= 4.4',
            'bb >= 10',
            'and_uc 9.9',
          ],
        },
      },
    ],
    [
      require.resolve('@babel/preset-react'),
      {
        development: process.env.NODE_ENV === 'development',
        useBuiltIns: true,
      },
    ],
    require.resolve('@babel/preset-typescript'), // support ts
  ],
  plugins: [
    require.resolve('react-hot-loader/babel'),
    require.resolve('@babel/plugin-syntax-dynamic-import'),
    require.resolve('@babel/plugin-proposal-class-properties'),
    require.resolve('@babel/plugin-proposal-export-default-from'),
  ],
};

关于 postcss

此版本已经不需要格外的配置postcss.config.js文件了。

如果需要额外的配置，可以另外声明postcss.config.js，将会覆盖已有的默认配置（postcss-preset-env & postcss-normalize）。

What means Jaraxxus

Jaraxxus 是炉石中的一个恶魔，他非常强大，2 费可以召唤一个 666 的地狱火。

我希望此项目也能通过简单的配置创建出强大的 React 项目。