小程序框架 Remax 发布 2.0

经过一段时间的开发，我们很高兴地向大家介绍支持 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
链接：https://segmentfault.com/a/1190000022559678