smallfish

配置

基础配置

你可以在 config/config.js 里面配置 smallfish，在 smallfish 中大部分的配置都是简单的开关。

// config/config.js
import routes from './routes';

export default {
  antd: true, // 开启 antd，默认 true，可引入 antd 组件
  antdpro: true, // 开启 antd pro，默认 false，可引入 ant-design-pro 组件
  styled: true, // 开启 styled，默认 false，可用 styled-component 方式写样式
  dva: true, // 开启 dva，默认 false，可使用 dva
  i18n: true, // 开启 i18n 多语言功能，默认 true，可使用 smallfish/i18n 套件

  history: 'hash', // 路由方式，默认为 hash，可为 browser
  routes, // 设置路由，一般建议单独用 routes 文件引入
};

// config/routes.js
export default [
  {
    path: '',
    component: '../layout',
    routes: [
      { path: '/', component: 'Home' },
      { path: '/list', component: 'List' },
    ],
  },
];

详细配置参考

Tips: 下面的所有配置都在 config/config.js 中书写

script

添加前置 JS，在 HTML 应用逻辑代码执行之前执行配置的脚本。通常用于一些第三方 SDK 的引入。支持代码和 JS URL。

{
  script: [
    '//gw.alipayobjects.com/os/rmsportal/MUhciYBNsWHgRcKJaCAH.js',
    `
    const test = 'app config';
    console.log(test);
    `,
  ],
}

style

添加前置样式，在 HTML 最开始添加样式。通常用于一些第三方组件的样式引入。支持 CSS 代码或者 URL。

{
  style: [
    '//gw.alipayobjects.com/os/rmsportal/yZocPnjKidyvpGcGYKFs.css',
    'http://gw.alipayobjects.com/os/rmsportal/yUIfbViByGXvPzPqtINT.css',
    `
      body {
        font-size: 14px;
      }
    `,
  ];
}

externals

配置 webpack 的 externals 属性。

// 配置 react 和 react-dom 不打入代码
"externals": {
  "react": "window.React",
  "react-dom": "window.ReactDOM"
}

环境变量

端口配置

smallfish 默认有端口占用检测，通常情况下你无需关心端口问题，但是在某些需要固定端口的情况下你可以通过设置 PORT 环境变量进行端口指定：

{
  "script": {
    ...
    "dev": "PORT=9090 smallfish dev",
    ...
  }
}

关闭 HMR

HMR（模块热替换）允许在运行时更新所有类型的模块，而无需完全刷新，默认是开启的，但是在某些场景下可能需要关闭（如静态文件代理），可通过如下方式关闭 HMR：

{
  "script": {
    ...
    "dev:nohmr": "HMR=none smallfish dev",
    ...
  }
}

← 路由 →