raxjs / rax-app Goto Github PK

View Code? Open in Web Editor NEW

110.0 15.0 70.0 3.56 MB

Rax App Framework

Home Page: https://github.com/alibaba/rax

License: MIT License

JavaScript 30.92% TypeScript 68.18% EJS 0.79% CSS 0.11%

rax react webpack universal miniapp weex kraken

rax-app's People

Contributors

Stargazers

Watchers

rax-app's Issues

babel-plugin-minify-dead-code-elimination 插件存在问题

如该 issue 所说明：babel/minify#981
有用户反馈在引用的库里面触发了该问题，无法绕过

问题的背景：

package.json 里漏写了依赖，但是 CI 检测没有检测出来，是否有检测方法

为什么没有检测出来:

现在的依赖检测是基于 import/no-extraneous-dependencies 这条规则来做的

如果有如下的依赖引入：

import test from 'ava';

import/no-extraneous-dependencies 会分析本地是否能 resolve 到ava，

如果能找到，但是 package.json 里没有声明依赖，那么就会出错误提示
但如果本地从未安装过 ava，那么就不会命中检测规则

在 CI 的场景，由于 package.json 里漏写了依赖，所以对应 2 的场景，检测规则不生效

社区类似讨论：import-js/eslint-plugin-import#1627

no-extraneous-dependencies 实现：https://github.com/benmosher/eslint-plugin-import/blob/master/src/rules/no-extraneous-dependencies.js

eslint-plugin-node 的检测规则 no-extraneous-require 和 eslint-plugin-import 的实现类似：都需要提前进行依赖安装

https://github.com/mysticatea/eslint-plugin-node/blob/master/lib/rules/no-extraneous-require.js#L45

其他解决方案

import/no-unresolved 可以检测资源路径是否能被 resolve 到，从而在 CI 场景下，检测出 package.json 中的依赖是否有缺失

但这条规则需要先执行 npm install 然后才能检测，在业务场景或 IDE 场景存在风险，不适合默认加到 rax 基础的 lint 规则里。

目前先对 rax ，rax-scripts, rax-components 这几个基础库单独加上该规则

CSS 文件里不写单位时内联和非内联表现不对齐

inlineStyle 的情况 driver 会在运行时转成 vw
非 inlineStyle 的情况工程上完全不管，无单位的样式失效

两种模式下表现应该对齐

inlineStyle 关闭后，与 filename 配置冲突

inlineStyle设置为 false 时，如果同时配置 filename，对 index.css无效

config.output.filename('pages/[name].js');

Style for Rax components is not load correctly when disable inlineStyle

When disable inlineStyle in build.json, styles for rax-text & rax-view can not be built to css file. (both spa and mpa are not work correctly)

{
  "plugins": [
    [
      "build-plugin-rax-app",
      {
        "targets": ["web"]
      }
    ]
  ],
  "inlineStyle": false
}

Can't resolve 'react' in document.js when Compatibility with React

Module not found: Error: Can't resolve 'react' in '/Users/yuanyan/Rax/rax-demo3/src/document'

info WEBPACK Starting the development server at:
info     http://localhost:9999/

info WEBPACK Hash: 3213a9b0c471faa8e8ef
info WEBPACK Version: webpack 4.41.5
info WEBPACK Child
info WEBPACK     Hash: 3213a9b0c471faa8e8ef
info WEBPACK     Time: 14662ms
info WEBPACK     Built at: 2020-01-06 21:12:13
info WEBPACK                       Asset      Size            Chunks  Chunk Names
info WEBPACK                _document.js  17.3 KiB
info WEBPACK                web/index.js  2.32 MiB             index  index
info WEBPACK     web/pages_Home_index.js  43.7 KiB  pages_Home_index  pages_Home_index
info WEBPACK     Child
info WEBPACK                Asset      Size    Chunks  Chunk Names
info WEBPACK         _document.js  17.3 KiB  document  document
info WEBPACK
info WEBPACK         ERROR in ./src/document/index.jsx
info WEBPACK         Module not found: Error: Can't resolve 'react' in '/Users/yuanyan/Rax/rax-demo3/src/document'
info WEBPACK          @ ./src/document/index.jsx 1:0-38 7:5-18 9:5-18 9:32-45
info WEBPACK          @ multi ./src/document/index.jsx
info WEBPACK Compiled successfully
Set environment `DEBUG=true` to see detail error stacks.
html path is not found

import { createElement } from 'react';
import { Root, Style, Script} from 'rax-document';

function Document() {
  return (
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover"/>
        <title>rax-demo3</title>
        <Style />
      </head>
      <body>
        {/* root container */}
        <Root />
        <Script />
      </body>
    </html>
  );
}
export default Document;

[Feature] 默认 lazy load chunk 的行为，需要有对应资源获取失败的回调

目前 Rax 工程页面都是开启 lazy 加载，在弱网条件下，存在动态加载 bundle 的时候资源加载失败的情况，需要将对应的报错吐给开发者

babel-plugin-transform-jsx-stylesheet 存在性能问题

一个 Component 同时配置 className 与 style 字段时，会编译成如下：

<Component style={Object.assign({}, _styleSheet[className], style)} />

来自：
https://github.com/raxjs/rax-scripts/blob/c4565b0ef73d5a76aa77910952cb4e3f864aa487/packages/babel-plugin-transform-jsx-stylesheet/src/tests/index.js#L254-L269

这样会直接导致通过 memo 和 PureComponent 进行优化的 Component 优化无效。

react-perf/jsx-no-new-object-as-prop

是否可能将 className 与 style 的合并结果进行缓存，从而不影响 memo 和 PureComponent 的组件优化呢？

组件开发支持构建 es 目录

目前只支持 Commonjs 规范的 lib 目录，需要支持下符合 es module 的 es 目录，同时目前 package.json 里 module: 'src/index.js' 的写法是有问题的：

https://github.com/raxjs/rax-scripts/blob/master/packages/rax-generator/src/template/component/package.json.ejs#L7

建议 document 渲染时取消默认添加 <!DOCTYPE html>

背景：

rax-app 使用 jsx 作为 document 的模板语言，目前构建产物最前面默认添加了
相关代码

        // get document html string
const pageSource = `<!DOCTYPE html>${renderToString(DocumentContextProviderElement)}`;

这样就对模板能力做了限制（和 ejs 能力不对等)，比如我想渲染成非 html 就很麻烦。

建议：

取消默认添加
rax-document 提供 DOCTYPE 组件（这个标签比较特别，非闭合）
目前如何写一个类似 DOCTYPE组件，也可以在文档里面描述一下，不然使用 jsx 作为模板语言，写起来有些痛苦

背景

目前通过 external 掉 rax-app 之后，体积能减少 50k。

Action

rax-app 中 rax-pwa 替换为 create-app-container （缩减版 rax-pwa）
在开发者没有使用到 tabBar 配置的时候，external 掉 create-app-container
create-app-shared 中 env 相关的代码没有命中 platformLoader 的 AST 逻辑
从 analyze 来看 tree-shaking 似乎没有生效需要进一步看看

build.json里outputDir设置后，部分文件依然输出在默认文件夹内

{
"targets": [
"wechat-miniprogram"
],
"outputDir": "dist/build",
"plugins": []
}
这样设置后，输出如下图

还有个build.json小问题，IDE一直有个提示，如下图

[Feature]support @import '~file'; syntax in less

Is your feature request related to a problem? Please describe.
目前less文件中不支持 ~ 规则

@import '~/module/less/mixins.less';

这个语法，常见的[style]-loader 有处理，不过mp-loader会对样式文件进行预处理，还没有走到webpack的[style]-loader
Describe the solution you'd like
把mp-loader中对样式文件的处理逻辑拆出来，在webpack处理样式文件时进行处理

[Refactor]: 将 build-plugin-multi-demo-portal 功能合并入 build-plugin-rax-component

@lianmin 组件工程直接内置现在 build-plugin-multi-demo-portal 提供的预览功能，更加方便用户开发，不用理解新的概念。

PHA 源码链路改动

app.json => manifest.json 原有链路有，部分细节需要改造
appWorker.js 增加 worker js
nsr 预渲染链路

[Feature]: rax-app support miniapp compile project

背景

rax-app 研发框架支持项目级编译时。

任务列表

工程日志优化

默认工程会有如下报错

不同插件构建日志重复打印

rax-plugin-app 和 rax-plugin-multi-pages 在每次编译完后都会重复打印如下日志，只要保留一个就行了

SSR 工程下 JSX+ 的日志重复打印

背景

build-plugin-rax-app 逻辑过重，各个端的工程能力存在耦合关系，小程序 or Web 的工程能力需要频繁更新，现有模式不利于迭代维护
icejs 和 rax-app 同时需要使用小程序的工程能力，这部分代码逻辑较多，拆分出来之后更利于维护
存在给飞猪提供 jsx2mp 这种特殊构建工具的包，每次小程序相关包 beta ，需要升级的链路较长，而且 jsx2mp 逻辑较重，不属于通用能力
小程序工程能力，在组件/项目工程存在大量复用逻辑，并且目前组件工程不支持小程序运行时方案

方案

Step 1 (8月20日)

小程序工程能力抽离成 build-plugin-miniapp-compile/build-plugin-miniapp-runtime，export default 出 build plugin 插件的同时，export 出工程配置的 API，从而便于现有项目向下兼容。

这两个插件将同时支持小程序项目工程的构建能力和组件工程的构建能力。

接入现有 build-plugin-rax-app/build-plugin-rax-component，保证能力完全向下兼容
接入 icejs

Step 2 (8月27日)

Web 等其他端的工程里梳理之后保留在原来 build-plugin-rax-app 中维护。

document 使用 jsx 开发，如何友好支持 script 代码

<script>
    const  test = {
       title: "test title"
   }
</script>

构建时，会被转义
如果使用 dangerouslySetInnerHTML 与其他模板相比，体验太不友好
希望可以给一个方案

transform jsx stylesheet 支持 css module 的写法

[Feature]: app plugin 中配置 devServer 的问题

表现

目前 build-plugin-rax-app 支持配置 devServer 字段，但是支持以下字段：

其中的字段名和 webpack-dev-server 是一致的，但是并不全，比如在 Web 场景中常见的存在跨域问题，需要设置其中的 proxy，用户需要单独写一个插件来做这件事

预期

既然已经有 devServer ，应该是和 webpack-dev-server 暴露出的所有字段一致？

Unable to install packages through `def init rax`

Error in installing dependencies occurs when run def init rax
Console log:

When then try to run tnpm install after project initialisation there is also error:

现针对小程序端独有的配置，在 build.json 中怎么配置？

document 支持 tsx

目前 typescript 脚手架里面的 document 文件还是 jsx，希望也可以支持 tsx

[Bug] rax-app 多页模式 mpa-loader 内联模式编译问题

背景

现有 MPA 的架构，会通过 webpack 内联 loader 的形式，给 entry 文件加上 mpa-loader（包裹自调用 render 逻辑）。这种处理方式存在的问题是，由于 entry loader (即内联 loader)的执行时机是晚于 normal loader 的，这就导致 babel 无法编译到通过内联 loader 添加的代码，导致在部分低端设备上出现代码未编译为 ES5 而报错的问题。

解决方案

MPA 的入口文件从 src/pages/Home/index 改为 .rax/pages/Home/Entry.tsx（以 Home 页面举例），在 Entry.tsx 里实现自调用 render 的逻辑，从而保证 loader 不会存在递归调用页面自身的问题。

递归调用页面自身： 如果只是将 mpa-loader 的类型改为 normal loader，会导致存在以下逻辑：

function mpaLoader() {
  return `import PageComponent from ${this.resoucePath}
 render(PageComponent);
`;
}

`build-plugin-rax-compat-react` not work with `antd-mobile`

Error message

(undefined) ./node_modules/antd-mobile/es/action-sheet/index.js
Module not found: Can't resolve 'react-dom' in '...'

Configuration (`build.json`)

{
  "plugins": [
    [
      "build-plugin-rax-app",
      {
        "targets": ["web", "wechat-miniprogram"]
      }
    ],
    "build-plugin-rax-compat-react"
  ]
}

Replace rax-compile-config

use rax-babel-config and rax-webpack-config to replace rax-compile-config

[BUG] 组件工程，如果 targets 不添加小程序相关，不会构建出 lib 目录

如果 targets 为 ['web', 'weex'] 不会构建出 lib 目录
如果添加了 miniapp，会同时构建出 lib/miniapp lib/miniapp-wechat，预期应该只有 lib/miniapp

组件工程中，用户只选择小程序端时，构建出的产物在使用时报找不到依赖

描述
组件工程中，用户只选择小程序端时，构建时不会创建 lib/index.js 文件，导致 package.json 的 main 字段对应文件不存在，这样在小程序中使用时会报找不到依赖
解决办法
用户只选择小程序端时，构建时也默认给 lib 目录下创建一个空的 index.js 文件

def dev 端口检查与 build-scripts 冲突

[BUG] windows 上启动服务后资源找不到

复现步骤：
用 windows 初始化项目，选择 Web 作为投放端，npm start:

TypeError: unknown: Cannot read property 'type' of undefined

at PluginPass.JSXOpeningElement (/Users/qindachang/Documents/Projects/go.heytea.com/node_modules/babel-plugin-transform-jsx-to-stylesheet/src/index/js:216:45)

if (hasStyleAttribute && styleAttribute.value) {
            let expression = styleAttribute.value.expression
            if(!expression) // 这里可能会出现undefined
              return
            let expressionType = expression.type

            // style={[styles.a, styles.b]} ArrayExpression
            if (expressionType === 'ArrayExpression') {
              expression.elements = arrayExpression.concat(expression.elements)
              // style={styles.a} MemberExpression
              // style={{ height: 100 }} ObjectExpression
              // style={{ ...custom }} ObjectExpression
              // style={custom} Identifier
              // style={getStyle()} CallExpression
              // style={this.props.useCustom ? custom : null} ConditionalExpression
              // style={custom || other} LogicalExpression
            } else {
              styleAttribute.value.expression = t.arrayExpression(arrayExpression.concat(expression))
            }
          } else {

error Error: listen EADDRINUSE :::9369 when using node debug

~ node --inspect ./node_modules/.bin/rax-scripts start
Debugger listening on ws://127.0.0.1:9229/7dc9453d-cb9c-4921-ab53-448c76bbf903
For help, see: https://nodejs.org/en/docs/inspector
Starting inspector on 127.0.0.1:9229 failed: address already in use

related to tj/commander.js#533

调整 MPA 开启方式

问题：目前 SPA 和 MPA 在开启方式上是不对等的，从 SPA 切换到 MPA 需要引入单独的插件，容易给用户造成理解成本

解决方案：将 MPA 的开启方式调整到 build-plugin-rax-app 内

{
  "plugins": [
    [
      "build-plugin-rax-app",
      {
        "targets": ["web"],
        "type": "mpa" // spa
      }
    ]
  ]
}

改动点：

抽取 MPA 相关配置到 rax-multi-page-config
build-plugin-rax-app/build-plugin-rax-multi-pages 依赖 rax-multi-page-config 进行多页配置，同时 set 多页标志到插件体系中
其他插件 ssr/def 去除对 build-plugin-rax-multi-pages 的直接判断，改为判断多页标志

TypeError: Cannot read property 'split' of undefined
    at Object.configWebpack (node_modules/build-plugin-rax-app/src/config/user/keys/hash.js:11:32)
    at node_modules/build-plugin-rax-app/src/config/ssr/getBase.js:33:20

build.json

{
  "plugins": [
    [
      "build-plugin-rax-app",
      {
        "targets": ["web"]
      }
    ]
  ],
  "hash": true
}

@alib/build-scripts: 0.1.12
build-plugin-rax-app: 2.0.0

[BUG]用 rax-scripts lineCSS 的方式打包 animate.css，在ios 上开启动画减弱的设备上会报错

出问题的代码：https://github.com/raxjs/rax-scripts/blob/083d98416234e1d031c6e405d01e1fc42ac8eb6f/packages/stylesheet-loader/src/index.js#L156

inlinceCSS 的模式打包 animate.css，_styles[key] 可能为空，导致 Object.assign 报错。

打包前：

@media print, (prefers-reduced-motion: reduce) {
  .animate__animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }

  .animate__animated[class*='Out'] {
    opacity: 0;
  }
}

打包后

var i = {
        animate__animated: {
          WebkitAnimationDuration: "1ms !important",
          animationDuration: "1ms !important",
          WebkitTransitionDuration: "1ms !important",
          transitionDuration: "1ms",
          WebkitAnimationIterationCount: "1 !important",
          animationIterationCount: "1 !important"
        }, 
        "animate__animated[class*='Out']": { opacity: 0 } // 这一条在 _styles 里不存在
};

要看下为啥这条样式在打包后丢失了。

以及为了保证健壮性，建议可以加上为空判断 || {}，来兼容不报错：

_styles[key] = Object.assign(_styles[key] || {}, ruleData[key]);

小程序静态编译在微信中语法报错

微信小程序 moustache 语法不支持 key value 形式，如最下图
步骤:

npm init rax
选择微信小程序
run

@rax-types/rax 类型冲突

https://github.com/raxjs/rax-scripts/blob/9a75e1c3af2544513330cfe40012efd58f8f33cb/packages/scripts-core/package.json#L19

auto-bind 依赖的@types/react 和 @rax-types/rax 类型冲突。refs: sindresorhus/auto-bind#16