in packages/build-plugin-lowcode/src/index.js [716:925]
async function bundleEditorView(
webPackConfig,
options,
pluginOptions,
metaPathMap,
platforms,
execCompile,
) {
const { registerTask, getAllTask, onGetWebpackConfig } = options;
const { rootDir, pkg: package } = options.context;
if (!PARSED_NPM_NAME) {
PARSED_NPM_NAME = parseNpmName(package.name);
}
const {
package: packageName = package.name,
library = PARSED_NPM_NAME.uniqueName,
umdUrls,
renderUrls,
editUrls,
baseLibrary = 'react',
components,
groups = DEFAULT_GROUPS,
categories = DEFAULT_CATEGORIES,
staticResources = {},
singleComponent = false,
ignoreComponents = {},
engineScope = '@ali',
externals = {},
setterMap = {},
buildTarget = 'build',
fullbackMeta = 'default',
lowcodeDir = 'lowcode',
entryPath,
type = 'component',
setterName,
presetConfig = {},
customPlugins = [],
} = pluginOptions || {};
const metaExportName = `${PARSED_NPM_NAME.uniqueName}Meta`;
const advancedRenderUrls = {};
platforms.forEach((platform) => {
advancedRenderUrls[platform] = [
`./render/${platform}/view.js`,
`./render/${platform}/view.css`,
];
});
let _setterMap = '{';
const setterImportStr = Object.keys(setterMap || {})
.map((item) => {
_setterMap += `\n ${item},`;
return `import ${item} from '${setterMap[item]}';`;
})
.join('\n');
_setterMap += '\n}';
const indexJsParams = {
package: packageName,
version: package.version,
library,
urls: JSON.stringify(
renderUrls ||
umdUrls || [
`${buildTarget}/${lowcodeDir}/view.js`,
`${buildTarget}/${lowcodeDir}/view.css`,
],
),
editUrls: JSON.stringify(
editUrls ||
umdUrls || [
`${buildTarget}/${lowcodeDir}/view.js`,
`${buildTarget}/${lowcodeDir}/view.css`,
],
),
advancedRenderUrls: JSON.stringify(advancedRenderUrls),
metaUrl: `${buildTarget}/${lowcodeDir}/meta.js`,
devMode: false,
metaExportName,
baseLibrary,
groups: JSON.stringify(groups),
categories: JSON.stringify(categories),
ignoreComponents: JSON.stringify(ignoreComponents),
extraAssets: 'false',
builtinAssets: 'false',
setterImportStr,
setterMap: _setterMap,
metaPathMap: JSON.stringify(metaPathMap),
fullbackMeta,
setterName: setterName || '',
type,
presetConfig: JSON.stringify(presetConfig),
customPlugins: JSON.stringify(customPlugins),
};
const indexJs = generateEntry({
template: 'index.jsx',
filename: 'index.jsx',
rootDir,
params: indexJsParams,
});
const previewJs = generateEntry({
template: 'preview.jsx',
filename: 'preview.jsx',
rootDir,
params: {
isRax: baseLibrary === 'rax',
},
});
let componentViews;
let componentViewsExportStr;
let componentViewsImportStr;
const lowcodeViewPath = path.resolve(rootDir, `${lowcodeDir}/view.tsx`);
if (singleComponent && fse.existsSync(lowcodeViewPath)) {
componentViewsImportStr = `import * as SingleComponentData from '${lowcodeViewPath}'`;
componentViews = `{
...SingleComponentData
}`;
// default 不一定存在，export { default } 不安全可能会报错
componentViewsExportStr = `\nconst entryDefault = componentInstances.default;\nexport { entryDefault as default };\nexport * from '${lowcodeViewPath}';`;
} else {
const _componentViews = getUsedComponentViews(rootDir, lowcodeDir, components) || [];
componentViews = `{${_componentViews
.map((component) => {
return `${component}: ${component}`;
})
.join(',')}}`;
componentViewsExportStr = _componentViews
.map((component) => {
return `const ${component} = getRealComponent(${component}Data, '${component}');\nexport { ${component} };`;
})
.join('\n');
// default 不一定存在，export { default } 不安全可能会报错
componentViewsExportStr += `\nconst entryDefault = componentInstances.default;\nexport { entryDefault as default }`;
componentViewsImportStr = _componentViews
.map((component) => {
const componentNameFolder = camel2KebabComponentName(component);
const viewJsPath = path.resolve(rootDir, `${lowcodeDir}/${componentNameFolder}/view`).replace(/\\/g, '\\\\');
return `import * as ${component}Data from '${viewJsPath}';`;
})
.join('\n');
}
const scssEntry = getScssEntry(rootDir);
const viewPath = generateEntry({
template: 'view.js',
filename: 'view.js',
rootDir,
params: {
entryPath: getEntry(rootDir, entryPath),
scssImport: scssEntry ? `import '${scssEntry}'` : '',
componentViews,
componentViewsExportStr,
componentViewsImportStr,
library,
execCompile,
},
});
console.log('in render view: ', execCompile);
if (!execCompile || editUrls || umdUrls || getAllTask().includes('lowcode-editor-view'))
return viewPath;
registerTask('lowcode-editor-view', webPackConfig);
onGetWebpackConfig('lowcode-editor-view', (config) => {
debug('editor view build');
config.plugin('HtmlWebpackPlugin').use(HtmlWebpackPlugin, [
{
inject: false,
templateParameters: {
...STATIC_RESOURCES_MAP[engineScope],
...staticResources,
},
template: require.resolve('./public/index.html'),
filename: 'index.html',
},
]);
config.plugin('designer').use(HtmlWebpackPlugin, [
{
inject: false,
templateParameters: {
...STATIC_RESOURCES_MAP[engineScope],
...staticResources,
},
template: require.resolve('./public/designer.html'),
filename: 'designer.html',
},
]);
config.plugin('preview').use(HtmlWebpackPlugin, [
{
inject: false,
templateParameters: {
previewCssUrl: './preview.css',
isRax: baseLibrary === 'rax',
...STATIC_RESOURCES_MAP[engineScope],
},
template: require.resolve('./public/preview.html'),
filename: 'preview.html',
},
]);
config.merge({
entry: {
view: viewPath,
index: indexJs,
preview: previewJs,
},
});
config.output.library(library).libraryTarget('umd');
config.output.path(path.resolve(rootDir, `${buildTarget}/${lowcodeDir}`));
config.externals({ ...COMMON_EXTERNALS_MAP[engineScope], ...externals });
if (baseLibrary === 'rax') {
const scssRule = config.module.rule('scss');
scssRule.use('rpx-loader').loader('rpx-loader').before('css-loader');
}
});
return viewPath;
}