Remax 配置

remax.config.js 是 Remax 的配置文件

  1. // remax.config.js 默认配置
  2. module.exports = {
  3.   // boolean | RegExp 开启或关闭 css modules，支持传入正则表达式配置开启的文件命名格式
  4.   cssModules: /\.module\.(less|scss|css)$/,
  5.   // 配置项目路径，默认当前路径
  6.   cwd: process.cwd(),
  7.   // 是否显示 build 进度，默认显示
  8.   progress: true,
  9.   // 指定代码的根目录，默认 src
  10.   rootDir: 'src',
  11.   // build 目录，默认 dist
  12.   output: 'dist',
  13.   // 配置路径别名
  14.   alias: {},
  15.   // 是否将 px 转换为 rpx, 默认是 true
  16.   pxToRpx: true,
  17.   postcss: {
  18.     options: {
  19.       use: [
  20.         [
  21.           'less',
  22.           {
  23.             paths: [
  24.               // 可方便解析 node_modules 中样式文件
  25.               path.resolve(__dirname, 'node_modules'),
  26.               // 可作为全局样式目录
  27.               path.resolve(__dirname, 'src/assets/styles'),
  28.             ],
  29.           },
  30.         ],
  31.         // 其他样式文件配置，比如sass, stylus, 如果有多种样式文件，则也需要添加对应配置
  32.         ['stylus', {}],
  33.       ],
  34.     },
  35.     // 其他postcss 插件, 会和默认的插件进行拼接
  36.     plugins: [],
  37.   },
  38.   // 修改 rollup 的配置
  39.   rollupOptions: (options) => {
  40.     options.inputs.push('foo.js');
  41.     return options;
  42.   }
  43. };

如果你想针对平台做一些配置，你可以通过设置环境变量来控制，如：

  1. // PLATFORM=wechat
  2. // remax.config.js 默认配置
  3. module.exports = {
  4.   output: 'dist/' + process.env.PLATFORM,
  5. };

通过上面的方式，可以针对不同的平台定义不一样的打包输出路径

关于 css modules 和样式更多信息，请参考 指南 - 样式

babel 配置

Remax 支持直接在项目根目录创建 babel.config.js 文件来自定义 babel 配置，例如：

  1. // babel.config.js
  2. {
  3.   "plugins": ["loop-optimizer"],
  4.   "presets": ["remax"]
  5. }

由于 babel7 的推荐以及项目目录配置等问题，请使用 babel.config.js 文件而不是 .babelrc

记得安装 babel-preset-remax，并将它加入到 presets 配置中

路径别名

Remax 支持路径别名配置， 默认配置 @/ 对应 src/，例如：

  1. import Button from '@/components/Button';
  3. // 相当于
  4. import Button from 'project_cwd/src/components/Button';

你也可以通过 alias 自定义配置，如：

  1. // remax.config.js
  2. module.exports = {
  3.   ...
  4.   // 配置路径别名
  5.   alias: {
  6.     // 自动将 @components 指向 src/components
  7.     '@components': './src/components',
  8.   },
  9. };

文件引用

Remax 支持引用 JSON 和 图片 文件。用法如下：

  1. import JSON from './index.json';
  3. console.log(JSON); // json的内容
  1. import image from './index.png';
  3. <Image src={image} />;

小程序配置

Remax 用 config.js 定义小程序配置文件，以提高灵活性。

例如：

  1. // app.config.js
  3. module.exports = {
  4.  navigationBarTitleText: '标题',
  5.  ...
  6. }

Remax 优先读取默认导出的配置，如果你开发的是多端共用的项目，则可以改为：

  1. // app.config.js
  3. const title = '标题';
  5. // 微信
  6. exports.wechat = {
  7.   navigationBarTitleText: title,
  8. };
  10. // 支付宝
  11. exports.alipay = {
  12.   defaultTitle: title,
  13. };

这样就可以根据 build 目标平台自动选择配置

app.config.js 对应小程序 app.json，页面配置为对应页面的 config.js，如，pages/index/index.js 的页面配置为 pages/index/index.config.js

注意

由于微信不支持模板递归，因此在 Remax 中对层级深度有一定限制。如果开发者的小程序页面层级较深，可以通过 UNSAFE_wechatTemplateDepth 来控制层级，Remax 默认层级为 20。需要注意的是，层级越深，Remax 打包结果的大小增长越快