3

经过一段时间的开发,我们很高兴地向大家介绍支持 Web 应用构建的 Remax 2.0。

支持 Web 应用构建

得益于 Remax One 的设计,现在基于 Remax One 构建的应用可以编译到 Web 端了,只要使用下面的命令:

$ remax build -t web

通过这个 CodeSandbox 就可以体验(可能需要梯子):https://codesandbox.io/s/remax-web-e4801

构建 Web 应用的具体文档:https://remaxjs.org/guide/one/web

使用 Webpack 构建

在 1.0 中 Remax 使用 Rollup 作为底层构建工具。原因是在构建小程序代码时,我们要做的事情主要是处理模块依赖和一些代码转换,Rollup 本身实现非常简洁,使用起来也很简单,我们可以快速实现我们需要的功能。

但是 Rollup 默认只支持 ES Modules,虽然 rollup-plugin-commonjs 可以解决大部分 CommonJS 模块的问题,但是碰到一些不是很规范的 npm 包就会很麻烦。

另外在构建 Web 应用时,Rollup 的能力就稍显不足,比如 Code Splitting 和 Dev Server。

所以在 2.0 中为了统一小程序和 Web 应用的构建工具,我们从 Rollup 切换到了 Webpack。

插件机制

为了满足各种定制化的需求,我们在 2.0 中引入了插件机制。非核心的功能我们会以插件的形式来提供,以 Less 的支持为例,在 remax.config.js 中配置我们提供的 less 插件即可。

const less = require('@remax/plugin-less');

module.exports = {
  plugins: [less()],
};

插件相关的文档:https://remaxjs.org/guide/advanced/plugin

一个依赖

从 2.0 开始,项目只要依赖 remax 一个包。

自动识别 CSS Modules

Remax 会自动识别 CSS Modules,比如下面的写法会自动把 index.css 识别为 CSS Modules:

import styles from './index.css';

而如果是下面的写法, index.css 则会被自动当成全局 CSS 处理:

import './index.css';

重命名 alipay 到 ali

Remax 支持所有阿里系小程序,所以我们改用 ali 表示阿里小程序。

其他更多的改动细节可以查看我们的 CHANGELOG


yesmeck
2.1k 声望45 粉丝

代码用截图的负分,不格式化的负分。