Skip to content
This repository has been archived by the owner on Mar 7, 2024. It is now read-only.

Commit

Permalink
feat: 支持运行时插件 (#988)
Browse files Browse the repository at this point in the history 
* feat: 支持运行时插件

close #983

* fix: fix runtime plugin path
  • Loading branch information
@yesmeck
yesmeck authored May 26, 2020
1 parent a98ca93 commit 3a59fff
Show file tree
Hide file tree
Showing 35 changed files with 8,777 additions and 63 deletions.
60 changes: 55 additions & 5 deletions docs/guide/advanced/plugin.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,13 @@ module.exports = {

## 编写插件

Remax 的插件是一个简单的方法，这个方法返回一个对象，对象中的 key 是 Remax 提供的 hook 名。通过这些 hook，可以改变 Remax 构建小程序时的行为。
Remax 插件分为编译时插件和运行时插件，插件是一个 Object，Object 的 key 对应 Remax 提供的 hook 名。

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

```js
// 第一个参数是插件的配置
const lessPlugin = options => {
// 因为需要接受参数，所以这里用一个方法来返回插件。
export default options => {
return {
configWebpack({ config, addCSSRule }) {
addCSSRule({
Expand All @@ -49,8 +49,6 @@ const lessPlugin = options => {
},
};
};

export default lessPlugin;
```

## Hooks
Expand Down Expand Up @@ -81,6 +79,58 @@ export default lessPlugin;
}
```

### registerRuntimePlugin

注册运行时插件。

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

## 运行时 Hooks

### onAppConfig

修改 App 的配置。

```js
{
onAppConfig(config) {
const onLaunch = config.onLaunch;
config.onLaunch = () => {
console.log('onLaunch');
if (onLaunch) {
onLaunch();
}
}
return config;
}
}
```

### onPageConfig

修改 Page 的配置。

```js
{
onPageConfig(config) {
const onLoad = config.onLoad;
config.onLoad = () => {
console.log('onLoad');
if (onLoad) {
onLoad();
}
}
return config;
}
}
```

## 官方插件库

[https://github.com/remaxjs/plugins](https://github.com/remaxjs/plugins)
11 changes: 11 additions & 0 deletions packages/remax-cli/src/API.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { Options, Plugin, Meta, HostComponent, Platform } from '@remax/types';
import { merge } from 'lodash';
import Config from 'webpack-chain';
import { RuleConfig } from './build/webpack/config/css';
import winPath from '@remax/macro/lib/utils/winPath';

export default class API {
public plugins: Plugin[] = [];
Expand Down Expand Up @@ -108,6 +109,16 @@ export default class API {
});
}

getRuntimePluginFiles() {
return this.plugins
.map(plugin => {
if (typeof plugin.registerRuntimePlugin === 'function') {
return winPath(plugin.registerRuntimePlugin());
}
})
.filter(Boolean);
}

public registerAdapterPlugins(targetName: Platform, remaxConfig: Options) {
this.adapter.target = targetName;
this.adapter.name = targetName;
Expand Down
37 changes: 25 additions & 12 deletions packages/remax-cli/src/__tests__/integration/fixtures/lifeCycle/expected/app.js
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,24 @@
require('./runtime.js');
(my["webpackJsonp"] = my["webpackJsonp"] || []).push([[1],[
/* 0 */
require('./remax-vendors.js');
(my["webpackJsonp"] = my["webpackJsonp"] || []).push([[1],{

/***/ 0:
/***/ (function(module, exports, __webpack_require__) {

module.exports = __webpack_require__(1);


/***/ }),
/* 1 */

/***/ 1:
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _remax_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
/* harmony import */ var _remax_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_remax_runtime__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _app_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
/* harmony import */ var _app_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(42);
/* harmony import */ var _app_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_app_css__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(14);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

Expand Down Expand Up @@ -78,22 +80,33 @@ var _App = /*#__PURE__*/function (_React$Component) {
/* harmony default export */ __webpack_exports__["default"] = (App(Object(_remax_runtime__WEBPACK_IMPORTED_MODULE_0__["createAppConfig"])(_App)));

/***/ }),
/* 2 */

/***/ 14:
/***/ (function(module, exports) {

module.exports = require("@remax/runtime");
module.exports = require("react");

/***/ }),
/* 3 */

/***/ 4:
/***/ (function(module, exports) {

module.exports = require("react-reconciler");

/***/ }),

/***/ 42:
/***/ (function(module, exports, __webpack_require__) {

// extracted by mini-css-extract-plugin

/***/ }),
/* 4 */

/***/ 6:
/***/ (function(module, exports) {

module.exports = require("react");
module.exports = require("scheduler");

/***/ })
],[[0,0]]]);

},[[0,0,2]]]);
51 changes: 29 additions & 22 deletions packages/remax-cli/src/__tests__/integration/fixtures/lifeCycle/expected/pages/classPage.js
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,40 @@
require('./../runtime.js');
(my["webpackJsonp"] = my["webpackJsonp"] || []).push([[3],[
/* 0 */,
/* 1 */,
/* 2 */
require('./../remax-vendors.js');
(my["webpackJsonp"] = my["webpackJsonp"] || []).push([[4],{

/***/ 14:
/***/ (function(module, exports) {

module.exports = require("@remax/runtime");
module.exports = require("react");

/***/ }),
/* 3 */,
/* 4 */

/***/ 4:
/***/ (function(module, exports) {

module.exports = require("react");
module.exports = require("react-reconciler");

/***/ }),
/* 5 */,
/* 6 */,
/* 7 */,
/* 8 */,
/* 9 */

/***/ 47:
/***/ (function(module, exports, __webpack_require__) {

module.exports = __webpack_require__(10);
module.exports = __webpack_require__(48);


/***/ }),
/* 10 */

/***/ 48:
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _remax_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
/* harmony import */ var _remax_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_remax_runtime__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(14);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var remax__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(11);
/* harmony import */ var remax__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(49);
/* harmony import */ var remax__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(remax__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _hoc__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(12);
/* harmony import */ var _hoc__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(50);


function _typeof(obj) {
Expand Down Expand Up @@ -215,13 +212,15 @@ var _page = Object(_hoc__WEBPACK_IMPORTED_MODULE_3__["default"])(ClassPage);
/* harmony default export */ __webpack_exports__["default"] = (Page(Object(_remax_runtime__WEBPACK_IMPORTED_MODULE_0__["createPageConfig"])(_page, "pages/classPage")));

/***/ }),
/* 11 */

/***/ 49:
/***/ (function(module, exports) {

module.exports = require("remax");

/***/ }),
/* 12 */

/***/ 50:
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Expand Down Expand Up @@ -277,5 +276,13 @@ function HOC(Target) {
}(Target);
}

/***/ }),

/***/ 6:
/***/ (function(module, exports) {

module.exports = require("scheduler");

/***/ })
],[[9,0]]]);

},[[47,0,2]]]);
52 changes: 31 additions & 21 deletions packages/remax-cli/src/__tests__/integration/fixtures/lifeCycle/expected/pages/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,40 @@
require('./../runtime.js');
(my["webpackJsonp"] = my["webpackJsonp"] || []).push([[2],[
/* 0 */,
/* 1 */,
/* 2 */
require('./../remax-vendors.js');
(my["webpackJsonp"] = my["webpackJsonp"] || []).push([[3],{

/***/ 14:
/***/ (function(module, exports) {

module.exports = require("@remax/runtime");
module.exports = require("react");

/***/ }),
/* 3 */,
/* 4 */

/***/ 4:
/***/ (function(module, exports) {

module.exports = require("react");
module.exports = require("react-reconciler");

/***/ }),
/* 5 */

/***/ 43:
/***/ (function(module, exports, __webpack_require__) {

module.exports = __webpack_require__(6);
module.exports = __webpack_require__(44);


/***/ }),
/* 6 */

/***/ 44:
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _remax_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
/* harmony import */ var _remax_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_remax_runtime__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(14);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var remax_ali__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
/* harmony import */ var remax_ali__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(45);
/* harmony import */ var remax_ali__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(remax_ali__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _module__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(8);
/* harmony import */ var _module__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(46);



Expand All @@ -50,22 +51,23 @@ var _page = function _page() {
/* harmony default export */ __webpack_exports__["default"] = (Page(Object(_remax_runtime__WEBPACK_IMPORTED_MODULE_0__["createPageConfig"])(_page, "pages/index")));

/***/ }),
/* 7 */

/***/ 45:
/***/ (function(module, exports) {

module.exports = require("remax/ali");

/***/ }),
/* 8 */

/***/ 46:
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _remax_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
/* harmony import */ var _remax_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_remax_runtime__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(14);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var remax_ali__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
/* harmony import */ var remax_ali__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(45);
/* harmony import */ var remax_ali__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(remax_ali__WEBPACK_IMPORTED_MODULE_2__);


Expand All @@ -77,5 +79,13 @@ __webpack_require__.r(__webpack_exports__);
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](remax_ali__WEBPACK_IMPORTED_MODULE_2__["View"], null, "module");
});

/***/ }),

/***/ 6:
/***/ (function(module, exports) {

module.exports = require("scheduler");

/***/ })
],[[5,0]]]);

},[[43,0,2]]]);
Loading

1 comment on commit 3a59fff

@vercel
Copy link

@vercel vercel bot commented on 3a59fff May 26, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to following URLs:

Please sign in to comment.