配置

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: {},
  // 是否开启 wxml/axml 文件压缩
  compressTemplate: process.env.NODE_ENV === 'production',
  // 是否将 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', {}],
      ],
    },
    url: {
      // 是否自动将图片转换成 base64
      inline: false,
      // 转换图片的最大限制， 单位 KB
      maxSize: 8,
    },
    // 其他postcss 插件, 会和默认的插件进行拼接
    plugins: [],
    // 是否开启 watch 模式桌面提醒
    notify: false,
  },
  // 修改 rollup 的配置
  rollupOptions: options => {
    options.input.push('foo.js');
    return options;
  },
};

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

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

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

babel 配置

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

// babel.config.js
module.exports = {
  plugins: ['loop-optimizer'],
  presets: [
    [
      'remax',
      {
        // 是否使用 @babel/preset-typescript 转换TS代码
        typescript: true,
        // 例子：下面的 `decorators` 和 `classProperties` 可以使Mobx的装饰器能正常工作
        // @babel/plugin-proposal-decorators 的选项，详见 https://babeljs.io/docs/en/babel-plugin-proposal-decorators
        decorators: {
          legacy: true,
        },
        // @babel/plugin-proposal-class-properties 的选项，详见 https://babeljs.io/docs/en/babel-plugin-proposal-class-properties
        classProperties: {
          loose: true,
        },
      },
    ],
  ],
};

由于 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

config 同样支持 TypeScript：

// app.config.ts
import { AppConfig } from 'remax/wechat';
const config: AppConfig = {
 navigationBarTitleText: '标题',
 ...
}
export default config;