经过一段时间的开发,我们很高兴地向大家介绍支持 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。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。