使用插件

@remax/plugin-less 为例:

$ npm install @remax/plugin-less --save

remax.config.js 中配置:

const less = require('@remax/plugin-less');
module.exports = {
plugins: [
less({
lessOptions: {
globalVars: {
'primary-color': '"#4569d4"',
},
},
}),
],
};

编写插件

Remax 插件分为编译时插件和运行时插件,插件是一个 Object,Object 的 key 对应 Remax 提供的 hook 名。

还是以 @remax/plugin-less 为例,我们可以通过 configWebpack 这个 hook 新增一条处理 less 文件的规则。

// 因为需要接受参数,所以这里用一个方法来返回插件。
export default options => {
return {
configWebpack({ config, addCSSRule }) {
addCSSRule({
name: 'less',
test: /\.less(\?.*)?$/,
loader: require.resolve('less-loader'),
options,
});
},
};
};

Hooks

onBuildStart

构建开始前执行。可以用这个 hook 获取 Remax 的所有构建配置,但是注意不能在这个 hook 里改变构建配置。

参数

  • params
    • config - Remax 的构建配置。
{
onBuildStart({ config }) {
console.log(config.target);
}
}

onAppConfig

修改应用配置,注意跟运行时 hook onAppConfig 的区别,这个 hook 修改的是 app.json

参数

  • params
    • config - app.json 配置。
{
onAppConfig({ config }) {
config.window = {
...config.window,
defaultTitle: "Hello",
}
return config;
}
}

onPageConfig

修改页面配置,注意跟运行时 hook onPageConfig 的区别,这个 hook 修改的是页面对应的 json 配置。

参数

  • params
    • page - 页面路径,如: pages/home/index
    • config - 页面配置。
{
onPageConfig({ config, page }) {
if (page === 'pages/home/index') {
config.defaultTitle = 'Home page';
}
return config;
}
}

configWebpack

修改 Webpack 配置。

参数

  • params
    • config - webpack-chainConfig 对象
    • webpack - Webpack 实例,用于获取 Webpack 内置插件。
    • addCSSRule - 新增一条 CSS 处理规则。

configBabel

修改 Babel 配置。

  • params
    • config - Babel 配置
{
configBabel({ config }) {
config.plugins.push('awesome-babel-plugin');
return config;
}
}

registerRuntimePlugin

注册运行时插件。

{
registerRuntimePlugin() {
return path.resolve(__dirname, './runtime.js'),
}
}

运行时 Hooks

onAppConfig

修改 App 的配置。

参数

  • params
    • config - Remax 生成的 App 配置。
{
onAppConfig({ config }) {
const onLaunch = config.onLaunch;
config.onLaunch = () => {
console.log('onLaunch');
if (onLaunch) {
onLaunch();
}
}
return config;
}
}

onPageConfig

修改 Page 的配置。

参数

  • params
    • page - 页面路径,如: pages/home/index
    • config - Remax 生成的 Page 配置。
{
onPageConfig({ config }) {
const onLoad = config.onLoad;
config.onLoad = () => {
console.log('onLoad');
if (onLoad) {
onLoad();
}
}
return config;
}
}

onAppComponent

封装 App 组件,并返回一个新的组件。

参数

  • params
    • component - App 组件
{
onAppComponent({ component }) {
// 注意这里一定要用 React.forwardRef 把 ref 传下去
return React.forwardRef((props, ref) => {
return React.createElement(
FooContext.Provider,
null,
React.createElement(component, { ...props, ref })
);
});
}
}

onPageComponent

封装页面组件,并返回一个新的组件。

参数

  • params
    • page - 页面路径,如: pages/home/index
    • component - 页面组件
{
onPageComponent({ component, page }) {
if (page === 'pages/home/index') {
// 注意这里一定要用 React.forwardRef 把 ref 传下去
return React.forwardRef((props, ref) => {
return React.createElement(
AppLayout,
null,
React.createElement(component, { ...props, ref })
);
});
}
return component;
}
}

官方插件库

https://github.com/remaxjs/plugins