配置

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;
  },
};

如果你想針對平臺做一些配置，你可以通過設置環(huán)境變量來控制，如：

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

通過上面的方式，可以針對不同的平臺定義不一樣的打包輸出路徑

babel 配置

Remax 支持直接在項目根目錄創(chuàng)建 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 優(yōu)先讀取默認導出的配置，如果你開發(fā)的是多端共用的項目，則可以改為：

// 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;