Oak-Team
/
oak-cli
13
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 19 Wiki Activity

修改了react-native的编译配置，将renderNative和i18n都以plugin的方式注入babel

This commit is contained in:
Xu Chang 2023-12-04 18:47:20 +08:00
parent 0e0ea10b51
commit 381503e494
6 changed files with 139 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
config/babel-plugin/oakI18n.js
View File

@ -9,16 +9,37 @@ const Regex =
const ModuleDict = {}; const ModuleDict = {};
const ReactNativeProjectDict = {};
function parseFileModuleAndNs(cwd, filename) { function parseFileModuleAndNs(cwd, filename) {
const relativePath = relative(cwd, filename); let cwd2 = cwd;
if (cwd.endsWith('native')) {
// react-native环境，需要重新定位一下项目根目录
if (ReactNativeProjectDict.hasOwnProperty(cwd)) {
if (ReactNativeProjectDict[cwd]) {
cwd2 = join(cwd, '..');
}
}
else {
const nodeModulePath = join(cwd, '..', 'node_modules');
const packageJsonPath = join(cwd, '..', 'package.json');
if (fs.existsSync(packageJsonPath) && fs.existsSync(nodeModulePath)) {
ReactNativeProjectDict[cwd] = true;
cwd2 = join(cwd, '..');
}
else {
ReactNativeProjectDict[cwd] = false;
}
}
}
const relativePath = relative(cwd2, filename);
if (relativePath.startsWith('node_modules') || relativePath.startsWith('..')) { // 在测试环境下是相对路径 if (relativePath.startsWith('node_modules') || relativePath.startsWith('..')) { // 在测试环境下是相对路径
const moduleRelativePath = relativePath const moduleRelativePath = relativePath
.replace(/\\/g, '/') .replace(/\\/g, '/')
.split('/') .split('/')
.slice(0, 2); .slice(0, 2);
const modulePath = join(cwd, ...moduleRelativePath); const modulePath = join(cwd2, ...moduleRelativePath);
const moduleDir = moduleRelativePath[1]; const moduleDir = moduleRelativePath[1];
let moduleName = ModuleDict[moduleDir]; let moduleName = ModuleDict[moduleDir];
@ -52,12 +73,12 @@ function parseFileModuleAndNs(cwd, filename) {
else { else {
let moduleName = ModuleDict['./']; let moduleName = ModuleDict['./'];
if (!moduleName) { if (!moduleName) {
const { name } = require(join(cwd, 'package.json')); const { name } = require(join(cwd2, 'package.json'));
ModuleDict['./'] = name; ModuleDict['./'] = name;
moduleName = name; moduleName = name;
} }
const rel2paths = relative(cwd, filename) const rel2paths = relative(cwd2, filename)
.replace(/\\/g, '/') .replace(/\\/g, '/')
.split('/'); .split('/');
@ -123,54 +144,57 @@ module.exports = (babel) => {
) { ) {
const { moduleName, ns } = parseFileModuleAndNs(cwd, filename); const { moduleName, ns } = parseFileModuleAndNs(cwd, filename);
const arguments = node.arguments; const arguments = node.arguments;
const [arg0, arg1] = arguments; if (arguments.length < 2) {
assert(arg0); // react-native会调用两次，这里要保护一下
const [arg0, arg1] = arguments;
assert(arg0);
if (arg1) { if (arg1) {
// 一般是对象，也可能是变量，表达式不予考虑 // 一般是对象，也可能是变量，表达式不予考虑
if (t.isObjectExpression(arg1)) { if (t.isObjectExpression(arg1)) {
const { properties } = arg1; const { properties } = arg1;
const oakNsProp = properties.find( const oakNsProp = properties.find(
ele => t.isStringLiteral(ele.key) && ele.key.value === oakNsPropName ele => t.isStringLiteral(ele.key) && ele.key.value === oakNsPropName
);
if (!oakNsProp) {
properties.push(
t.objectProperty(t.stringLiteral(oakNsPropName), t.stringLiteral(ns)),
t.objectProperty(t.stringLiteral(oakModulePropName), t.stringLiteral(moduleName))
); );
if (!oakNsProp) {
properties.push(
t.objectProperty(t.stringLiteral(oakNsPropName), t.stringLiteral(ns)),
t.objectProperty(t.stringLiteral(oakModulePropName), t.stringLiteral(moduleName))
);
}
}
else if (t.isIdentifier(arg1)) {
arguments.splice(1, 1, t.callExpression(
t.memberExpression(
t.identifier('Object'),
t.identifier('assign')
),
[
arg1,
t.objectExpression(
[
t.objectProperty(t.stringLiteral(oakNsPropName), t.stringLiteral(ns)),
t.objectProperty(t.stringLiteral(oakModulePropName), t.stringLiteral(moduleName))
]
)
]
));
}
else {
// 不处理，这里似乎会反复调用，不知道为什么
} }
} }
else if (t.isIdentifier(arg1)) {
arguments.splice(1, 1, t.callExpression(
t.memberExpression(
t.identifier('Object'),
t.identifier('assign')
),
[
arg1,
t.objectExpression(
[
t.objectProperty(t.stringLiteral(oakNsPropName), t.stringLiteral(ns)),
t.objectProperty(t.stringLiteral(oakModulePropName), t.stringLiteral(moduleName))
]
)
]
));
}
else { else {
// 不处理，这里似乎会反复调用，不知道为什么 // 如果无参数就构造一个对象传入
} arguments.push(
} t.objectExpression(
else { [
// 如果无参数就构造一个对象传入 t.objectProperty(t.stringLiteral(oakNsPropName), t.stringLiteral(ns)),
arguments.push( t.objectProperty(t.stringLiteral(oakModulePropName), t.stringLiteral(moduleName))
t.objectExpression( ]
[ )
t.objectProperty(t.stringLiteral(oakNsPropName), t.stringLiteral(ns)),
t.objectProperty(t.stringLiteral(oakModulePropName), t.stringLiteral(moduleName))
]
) )
) }
} }
} }
} }

6
config/babel-plugin/oakPath.js
View File

@ -31,12 +31,14 @@ module.exports = (babel) => {
const pathProperty = properties.find( const pathProperty = properties.find(
ele => t.isObjectProperty(ele) && t.isIdentifier(ele.key) && ele.key.name === 'path' ele => t.isObjectProperty(ele) && t.isIdentifier(ele.key) && ele.key.name === 'path'
); );
// console.log(filename, 'oakPath');
if (pathProperty) { if (pathProperty) {
console.warn(`${resolvePath}页面的OakPage中还是定义了path，可以删除掉了`); // react-native的编译器会走两次，这里会被命中
// console.warn(`${resolvePath}页面的OakPage中还是定义了path，可以删除掉了`);
pathProperty.value = t.stringLiteral(relativePath); pathProperty.value = t.stringLiteral(relativePath);
} }
else { else {
properties.push( properties.unshift(
t.objectProperty(t.identifier('path'), t.stringLiteral(relativePath)) t.objectProperty(t.identifier('path'), t.stringLiteral(relativePath))
); );
} }

18
config/babel-plugin/oakRenderNative.js Normal file
View File

@ -0,0 +1,18 @@
const t = require('@babel/types');
const { parse } = require('path');
const { injectGetRender } = require('../utils/injectGetRender');
module.exports = (babel) => {
return {
visitor: {
CallExpression(path, state) {
const { cwd, filename } = state;
const { base } = parse(filename);
const node = path.node;
if (['index.ts', 'index.js'].includes(base) && t.isCallExpression(node) && t.isIdentifier(node.callee) && node.callee.name === 'OakComponent') {
injectGetRender(node, cwd, filename, 'native');
}
},
},
};
};

29
config/native/transformer.js
View File

@ -22,6 +22,8 @@ const replaceEnvExpressionPlugin = require('./babelEnvPlugin');
const { injectGetRender } = require('../utils/injectGetRender'); const { injectGetRender } = require('../utils/injectGetRender');
const oakPathTsxPlugin = require('../babel-plugin/oakPath'); const oakPathTsxPlugin = require('../babel-plugin/oakPath');
const oakRenderNativePlugin = require('../babel-plugin/oakRenderNative');
const oakI18nPlugin = require('../babel-plugin/oakI18n');
async function renderToCSS({ src, filename, options = {} }) { async function renderToCSS({ src, filename, options = {} }) {
const { lessOptions = {} } = options; const { lessOptions = {} } = options;
@ -51,7 +53,7 @@ function transform({ filename, options, plugins, src }) {
cwd: options.projectRoot, cwd: options.projectRoot,
highlightCode: true, highlightCode: true,
filename, filename,
plugins: plugins.concat([replaceEnvExpressionPlugin, oakPathTsxPlugin]), plugins: plugins.concat([replaceEnvExpressionPlugin, oakPathTsxPlugin, oakRenderNativePlugin, oakI18nPlugin]),
sourceType: "module", sourceType: "module",
// NOTE(EvanBacon): We split the parse/transform steps up to accommodate // NOTE(EvanBacon): We split the parse/transform steps up to accommodate
// Hermes parsing, but this defaults to cloning the AST which increases // Hermes parsing, but this defaults to cloning the AST which increases
@ -71,18 +73,19 @@ function transform({ filename, options, plugins, src }) {
const transformResult = transformFromAstSync(sourceAst, src, babelConfig); const transformResult = transformFromAstSync(sourceAst, src, babelConfig);
// 为page和componet下的OakComponent注入getRender函数，去取得同目录下的render.native.tsx // 为page和componet下的OakComponent注入getRender函数，去取得同目录下的render.native.tsx
const resultAst = transformResult.ast; // 改成plugin注入
const { base } = path.parse(filename); // const resultAst = transformResult.ast;
if (['index.ts', 'index.js'].includes(base)) { // const { base } = path.parse(filename);
traverse(resultAst, { // if (['index.ts', 'index.js'].includes(base)) {
CallExpression(path) { // traverse(resultAst, {
const node = path.node; // CallExpression(path) {
if (t.isIdentifier(node.callee) && node.callee.name === 'OakComponent') { // const node = path.node;
injectGetRender(node, options.projectRoot, filename, 'native'); // if (t.isIdentifier(node.callee) && node.callee.name === 'OakComponent') {
} // injectGetRender(node, options.projectRoot, filename, 'native');
} // }
}) // }
} // })
// }
return { return {
ast: nullthrows(transformResult.ast), ast: nullthrows(transformResult.ast),

51
config/utils/injectGetRender.js
View File

@ -161,31 +161,36 @@ function injectGetRender(node, projectRoot, filename, env) {
*/ */
const arg = node.arguments[0]; const arg = node.arguments[0];
assert(t.isObjectExpression(arg)); assert(t.isObjectExpression(arg));
const propertyRender = t.objectProperty( // react-native的编译器会命中两次
t.identifier('getRender'), if (!arg.properties.find(
t.functionExpression(null, [], t.blockStatement( (ele) => t.isObjectProperty(ele) && t.isIdentifier(ele.key) && ele.key.name === 'getRender'
[ )) {
t.variableDeclaration('var', [ const propertyRender = t.objectProperty(
t.variableDeclarator( t.identifier('getRender'),
t.identifier('oakRenderFn'), t.functionExpression(null, [], t.blockStatement(
t.memberExpression( [
t.callExpression( t.variableDeclaration('var', [
t.identifier('require'), t.variableDeclarator(
[ t.identifier('oakRenderFn'),
t.stringLiteral('./render') t.memberExpression(
] t.callExpression(
t.identifier('require'),
[
t.stringLiteral('./render')
]
),
t.identifier('default')
), ),
t.identifier('default') )
), ]),
t.returnStatement(
t.identifier('oakRenderFn')
) )
]), ]
t.returnStatement( ))
t.identifier('oakRenderFn') );
) arg.properties.unshift(propertyRender);
] }
))
);
arg.properties.unshift(propertyRender);
} }
} }

2
template/native/android/build.gradle
View File

@ -11,6 +11,8 @@ buildscript {
ndkVersion = "23.1.7779620" ndkVersion = "23.1.7779620"
} }
repositories { repositories {
maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
google() google()
mavenCentral() mavenCentral()
} }