feat: 组件构建的命令行工具 — build命令

packages/remax-component-scripts/bin/index.js

@@ -0,0 +1,4 @@
+#!/usr/bin/env node
+
+const { run } = require("..");
+run();

packages/remax-component-scripts/jest.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+ preset: 'ts-jest',
+ testRegex: '.*\\.test\\.ts$',
+ testPathIgnorePatterns: ['/lib/'],
+ coveragePathIgnorePatterns: ['/src/tests/'],
+ setupFilesAfterEnv: ['./setup.js'],
+};

packages/remax-component-scripts/package.json

@@ -0,0 +1,45 @@
+{
+ "name": "@remax/component-scripts",
+ "version": "2.14.1",
+ "description": "Remax 是一个全新的基于 React 的小程序开发框架",
+ "main": "./lib/index.js",
+ "bin": {
+ "remix-components-script": "./bin/index.js"
+ },
+ "keywords": [
+ "react",
+ "miniapp",
+ "mini-program",
+ "wechat"
+ ],
+ "license": "MIT",
+ "bugs": {
+ "url": "https://github.com/remaxjs/remax/issues"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/remaxjs/remax.git"
+ },
+ "homepage": "https://remaxjs.org",
+ "scripts": {
+ "clean": "rimraf lib tsconfig.tsbuildinfo",
+ "prebuild": "npm run clean",
+ "build": "tsc",
+ "test": "jest",
+ "test:debug": "npx --node-arg=--inspect-brk jest -i"
+ },
+ "dependencies": {
+ "@remax/cli": "^2.14.1",
+ "@remax/father-build": "^1.19.8",
+ "@types/lodash": "^4.14.171",
+ "lodash": "^4.17.21",
+ "yargs": "^16.0.3"
+ },
+ "devDependencies": {
+ "@types/node": "^16.4.5",
+ "babel-plugin-add-header-comment": "^1.0.3"
+ },
+ "publishConfig": {
+ "access": "public"
+ }
+}

packages/remax-component-scripts/setup.js

@@ -0,0 +1 @@
+jest.setTimeout(60000);

packages/remax-component-scripts/src/build/buildDsl.ts

@@ -0,0 +1,51 @@
+import path from 'path';
+import { buildMiniComponent } from '@remax/cli';
+import UNSAFE_wechatTemplateDepth from '@remax/cli/lib/defaultOptions/UNSAFE_wechatTemplateDepth';
+
+export function buildDsl({ cwd, sourceDir, miniOptions, output, watch, onTargetDir, babelrc, type }: any) {
+ let originTarget = path.join(output, './' + type);
+ if (onTargetDir) {
+ originTarget = onTargetDir(originTarget, type);
+ }
+
+ const { input, configWebpack } = miniOptions;
+
+ return buildMiniComponent({
+ cwd,
+ pxToRpx: true,
+ watch,
+ progress: true,
+ input,
+ output: originTarget,
+ rootDir: sourceDir,
+ target: type,
+ plugins: [],
+ configWebpack({ config, addCSSRule }: any) {
+ const { plugins = [], presets = [] } = babelrc || {};
+
+ config.module
+ .rule('js')
+ .use('babel')
+ .tap((options: any) => {
+ options.api.configBabel = ({ config }: any) => {
+ config.plugins = [...config.plugins, ...plugins];
+
+ config.presets = [...config.presets, ...presets];
+ };
+ return options;
+ });
+
+ addCSSRule({
+ name: 'less',
+ test: /\.less(\?.*)?$/,
+ loader: require.resolve('less-loader'),
+ options: {},
+ });
+
+ configWebpack({ config, addCSSRule });
+ },
+ UNSAFE_wechatTemplateDepth,
+ errorScreen: false,
+ spm: false,
+ });
+}

packages/remax-component-scripts/src/build/buildEsm.ts

@@ -0,0 +1,20 @@
+import babel from '@remax/father-build/lib/babel';
+
+export function buildEsm({ cwd, rootPath, output, watch, babelrc, onTargetDir, esmOptions }: any) {
+ const { plugins, presets } = babelrc || {};
+ const bundleOpts = {
+ extraBabelPlugins: plugins,
+ extraBabelPresets: presets,
+ onTargetDir,
+ disableTypeCheck: esmOptions?.disableTypeCheck,
+ };
+ return babel({
+ type: 'esm',
+ cwd,
+ rootPath,
+ output,
+ watch,
+ log: console.log,
+ bundleOpts,
+ });
+}

packages/remax-component-scripts/src/build/getConfig.ts

@@ -0,0 +1,57 @@
+import _ from 'lodash';
+import * as path from 'path';
+import { IArgv } from './types';
+import WebpackConfig from 'webpack-chain';
+import { RuleConfig } from '@remax/cli/lib/build/webpack/config/css';
+
+export type IBuildType = 'esm' | 'ali' | 'wechat';
+
+export interface IOptions {
+ type: IBuildType;
+ sourceDir: string;
+ output: string;
+ watch?: boolean;
+ onTargetDir?: (originTargetDir: string, type: string) => string;
+ babelrc?: {
+ plugins?: any;
+ presets?: any;
+ };
+ mini?: {
+ input: string | { [key: string]: string };
+ configWebpack?: (params: {
+ config: WebpackConfig;
+ webpack: any;
+ addCSSRule: (ruleConfig: RuleConfig) => void;
+ }) => void;
+ };
+ esm?: {
+ disableTypeCheck: boolean;
+ };
+}
+
+const defaultConfig = {
+ type: 'esm',
+ sourceDir: './src',
+ output: './dist',
+ babelrc: {
+ plugins: [],
+ presets: [],
+ },
+};
+
+// 获取组件构建配置
+export function getConfig(
+ argv: IArgv,
+ { cwd = process.cwd(), configFilename = 'remax-component.config.js' }
+): IOptions {
+ let configFile;
+
+ try {
+ const filepath = path.resolve(cwd, configFilename);
+ configFile = require(filepath);
+ } catch (e) {
+ configFile = {};
+ }
+
+ return _.merge(defaultConfig, configFile);
+}

packages/remax-component-scripts/src/build/index.ts

@@ -0,0 +1,39 @@
+import { getConfig, IOptions } from './getConfig';
+import { IArgv } from './types';
+import { buildEsm } from './buildEsm';
+import { buildDsl } from './buildDsl';
+
+export default function build(cwd: string = process.cwd(), argv: IArgv) {
+ const options = getConfig(argv, { cwd });
+ buildComponent(cwd, options);
+}
+
+// 组件构建
+export function buildComponent(cwd: string, options: IOptions) {
+ const { type, sourceDir, output, onTargetDir, watch, babelrc, mini = {}, esm = {} } = options;
+
+ if (type === 'esm') {
+ return buildEsm({
+ cwd,
+ rootPath: sourceDir,
+ output,
+ watch,
+ babelrc,
+ onTargetDir,
+ esmOptions: esm,
+ });
+ } else if (type === 'ali' || type === 'wechat') {
+ return buildDsl({
+ cwd,
+ sourceDir,
+ output,
+ watch,
+ onTargetDir,
+ babelrc,
+ type,
+ miniOptions: mini,
+ });
+ } else {
+ throw Error('未知构建类型');
+ }
+}

packages/remax-component-scripts/src/build/types.ts

@@ -0,0 +1,4 @@
+export interface IArgv {
+ type: string;
+ watch: boolean;
+}

packages/remax-component-scripts/src/index.ts

@@ -0,0 +1,31 @@
+import yargs from 'yargs/yargs';
+import { hideBin } from 'yargs/helpers';
+import build from './build';
+
+export function run() {
+ yargs(hideBin(process.argv))
+ .scriptName('remax-component-script')
+ .command(
+ 'build',
+ '构建组件',
+ y => {
+ return y
+ .option('watch', {
+ describe: '监听文件变化',
+ alias: 'w',
+ type: 'boolean',
+ default: false,
+ })
+ .option('type', {
+ type: 'string',
+ alias: 't',
+ default: 'esm',
+ description: '编译类型',
+ });
+ },
+ argv => {
+ // 组件构建
+ build(process.cwd(), argv);
+ }
+ ).argv;
+}