raxjs / rax-app Goto Github PK
View Code? Open in Web Editor NEWRax App Framework
Home Page: https://github.com/alibaba/rax
License: MIT License
Rax App Framework
Home Page: https://github.com/alibaba/rax
License: MIT License
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处理样式文件时进行处理
rax-app 研发框架支持项目级编译时。
两种模式下表现应该对齐
如该 issue 所说明:babel/minify#981
有用户反馈在引用的库里面触发了该问题,无法绕过
['web', 'weex']
不会构建出 lib
目录miniapp
,会同时构建出 lib/miniapp
lib/miniapp-wechat
,预期应该只有 lib/miniapp
It works.
use rax-babel-config
and rax-webpack-config
to replace rax-compile-config
目前通过 external
掉 rax-app
之后,体积能减少 50k。
rax-app
中 rax-pwa
替换为 create-app-container
(缩减版 rax-pwa)external
掉 create-app-container
create-app-shared
中 env 相关的代码没有命中 platformLoader
的 AST 逻辑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 {
(undefined) ./node_modules/antd-mobile/es/action-sheet/index.js
Module not found: Can't resolve 'react-dom' in '...'
build.json
){
"plugins": [
[
"build-plugin-rax-app",
{
"targets": ["web", "wechat-miniprogram"]
}
],
"build-plugin-rax-compat-react"
]
}
一个 Component 同时配置 className 与 style 字段时,会编译成如下:
<Component style={Object.assign({}, _styleSheet[className], style)} />
这样会直接导致通过 memo 和 PureComponent 进行优化的 Component 优化无效。
是否可能将 className 与 style 的合并结果进行缓存,从而不影响 memo 和 PureComponent 的组件优化呢?
目前只支持 Commonjs 规范的 lib 目录,需要支持下符合 es module 的 es 目录,同时目前 package.json 里 module: 'src/index.js' 的写法是有问题的:
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;
问题: 目前 SPA 和 MPA 在开启方式上是不对等的,从 SPA 切换到 MPA 需要引入单独的插件,容易给用户造成理解成本
解决方案:将 MPA 的开启方式调整到 build-plugin-rax-app 内
{
"plugins": [
[
"build-plugin-rax-app",
{
"targets": ["web"],
"type": "mpa" // spa
}
]
]
}
改动点:
auto-bind 依赖的@types/react 和 @rax-types/rax 类型冲突。refs: sindresorhus/auto-bind#16
<script>
const test = {
title: "test title"
}
</script>
构建时,会被转义
如果使用 dangerouslySetInnerHTML 与其他模板相比,体验太不友好
希望可以给一个方案
@lianmin 组件工程直接内置现在 build-plugin-multi-demo-portal 提供的预览功能,更加方便用户开发,不用理解新的概念。
Demo 的开发环境建议和项目的开发配置一致
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
这几个基础库单独加上该规则
描述
组件工程中,用户只选择小程序端时,构建时不会创建 lib/index.js 文件,导致 package.json 的 main 字段对应文件不存在,这样在小程序中使用时会报找不到依赖
解决办法
用户只选择小程序端时,构建时也默认给 lib 目录下创建一个空的 index.js 文件
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]);
目前 Rax 工程页面都是开启 lazy 加载,在弱网条件下,存在动态加载 bundle 的时候资源加载失败的情况,需要将对应的报错吐给开发者
~ 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
的架构,会通过 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);
`;
}
背景:
rax-app 使用 jsx 作为 document 的模板语言,目前构建产物最前面默认添加了
相关代码
// get document html string
const pageSource = `<!DOCTYPE html>${renderToString(DocumentContextProviderElement)}`;
这样就对模板能力做了限制(和 ejs 能力不对等),比如我想渲染成非 html 就很麻烦。
建议:
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
jsx2mp
这种特殊构建工具的包,每次小程序相关包 beta ,需要升级的链路较长,而且 jsx2mp
逻辑较重,不属于通用能力小程序工程能力抽离成 build-plugin-miniapp-compile
/build-plugin-miniapp-runtime
,export default
出 build plugin 插件的同时,export
出工程配置的 API,从而便于现有项目向下兼容。
这两个插件将同时支持小程序项目工程的构建能力和组件工程的构建能力。
Web 等其他端的工程里梳理之后保留在原来 build-plugin-rax-app 中维护。
预期升级到 ^0.2.0
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.