Remax 配置

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

// remax.config.js 默认配置
module.exports = {
  // boolean | RegExp 开启或关闭 css modules，支持传入正则表达式配置开启的文件命名格式
  cssModules: /\.module\.(less|scss|css)$/,
  // 配置项目路径，默认当前路径
  cwd: process.cwd(),
  // 是否显示 build 进度，默认显示
  progress: true,
  // 指定代码的根目录，默认 src
  rootDir: 'src',
  // build 目录，默认 dist
  output: 'dist',
  // 配置路径别名
  alias: {},
  // 是否将 px 转换为 rpx, 默认是 true
  pxToRpx: true,
  postcss: {
    options: {
      use: [
        [
          'less',
          {
            paths: [
              // 可方便解析 node_modules 中样式文件
              path.resolve(__dirname, 'node_modules'),
              // 可作为全局样式目录
              path.resolve(__dirname, 'src/assets/styles'),
            ],
          },
        ],
        // 其他样式文件配置，比如sass, stylus, 如果有多种样式文件，则也需要添加对应配置
        ['stylus', {}],
      ],
    },
    // 其他postcss 插件, 会和默认的插件进行拼接
    plugins: [],
  },
  // 修改 rollup 的配置
  rollupOptions: (options) => {
    options.inputs.push('foo.js');
    return options;
  }
};

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

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

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

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

babel 配置

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

// babel.config.js
{
  "plugins": ["loop-optimizer"],
  "presets": ["remax"]
}

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

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

路径别名

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

import Button from '@/components/Button';
// 相当于
import Button from 'project_cwd/src/components/Button';

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

// remax.config.js
module.exports = {
  ...
  // 配置路径别名
  alias: {
    // 自动将 @components 指向 src/components
    '@components': './src/components',
  },
};

文件引用

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

import JSON from './index.json';
console.log(JSON); // json的内容

import image from './index.png';
<Image src={image} />;

小程序配置

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

例如：

// app.config.js
module.exports = {
 navigationBarTitleText: '标题',
 ...
}

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

// app.config.js
const title = '标题';
// 微信
exports.wechat = {
  navigationBarTitleText: title,
};
// 支付宝
exports.alipay = {
  defaultTitle: title,
};

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

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

注意

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