cli 文件名后缀判断

config/babel-plugin/oakStyle.js

@@ -0,0 +1,80 @@
+const fs = require('fs');
+const { relative } = require('path');
+const t = require('@babel/types');
+const pull = require('lodash/pull');
+const { assert } = require('console');
+const generate = require('@babel/generator').default;
+const parser = require("@babel/parser");
+
+const defaultOptions = {
+    baseDpr: 2, // base device pixel ratio (default: 2)
+    rpxUnit: 750, // rpx unit value (default: 750)
+    rpxPrecision: 6, // rpx value precision (default: 6)
+    forceRpxComment: 'rpx', // force px comment (default: `rpx`)
+    keepComment: 'no', // no transform value comment (default: `no`)
+};
+
+const rpxRegExp = /\b(\d+(\.\d+)?)rpx\b/;
+
+module.exports = (babel) => {
+    return {
+        visitor: {
+            JSXAttribute(path, state) {
+                const { cwd, filename } = state;
+                if (
+                    path.node &&
+                    t.isJSXIdentifier(path.node.name) &&
+                    path.node.name.name === 'style'
+                ) {
+                    const properties =
+                        path.node.value &&
+                        path.node.value.expression &&
+                        path.node.value.expression.properties;
+
+                    if (properties) {
+                        properties.forEach((node2, index) => {
+                            const { key, value } = node2;
+                            const code = generate(value);
+
+                            function getValue(val) {
+                                return val == 0
+                                    ? val
+                                    : `calc(100vw / ${defaultOptions.rpxUnit} * ${val})`;
+                            }
+
+                            const rpxGlobalRegExp = new RegExp(
+                                rpxRegExp.source,
+                                'g'
+                            );
+                            let codeStr = code.code;
+                            if (rpxGlobalRegExp.test(codeStr)) {
+                                codeStr = codeStr.replace(
+                                    rpxGlobalRegExp,
+                                    function ($0, $1) {
+                                        return getValue($1);
+                                    }
+                                );
+                                console.log('code2', codeStr);
+
+                                const ast2 = parser.parse(
+                                    "30px",
+                                    {
+                                        sourceType: 'module',
+                                        plugins: ['jsx'],
+                                    }
+                                );
+                                console.log('ast2', JSON.stringify(ast2));
+
+                                properties.splice(
+                                    index,
+                                    1,
+                                    t.objectProperty(key, value)
+                                );
+                            }
+                        });
+                    }                
+                }
+            },
+        },
+    };
+};

config/loaders/tsx-loader.js

@@ -1,7 +1,17 @@
 const { resolve, relative } = require('path');
+const rpxRegExp = /\b(\d+(\.\d+)?)rpx\b/;
 
-module.exports = function (content) {
+const defaultOptions = {
-    /* const options = this.getOptions() || {}; //获取配置参数
+    baseDpr: 2, // base device pixel ratio (default: 2)
+    rpxUnit: 750, // rpx unit value (default: 750)
+    rpxPrecision: 6, // rpx value precision (default: 6)
+    forceRpxComment: 'rpx', // force px comment (default: `rpx`)
+    keepComment: 'no', // no transform value comment (default: `no`)
+};
+
+module.exports = function (source) {
+    const options = Object.assign(defaultOptions, this.getOptions()); //获取配置参数
+    /* 
     const { context: projectContext } = options; // context 本项目路径
     const {
         options: webpackLegacyOptions,
@@ -15,9 +25,22 @@ module.exports = function (content) {
     const issuerContext = (issuer && issuer.context) || context;
     const root = resolve(context, issuerContext);
     if (/.tsx|.jsx/.test(resourcePath)) {
-        // console.log(content);
+        // console.log(source);
 
     } */
+    // const { rpxUnit } = options;
 
-    return content;
+    // function getValue(val) {
+    //     return val == 0 ? val : `calc(100vw / ${rpxUnit} * ${val})`;
+    // }
+
+    // const rpxGlobalRegExp = new RegExp(rpxRegExp.source, 'g');
+    // if (rpxGlobalRegExp.test(source)) {
+    //     return source.replace(rpxGlobalRegExp, function ($0, $1) {
+    //         return getValue($1);
+    //     });
+    // }
+
+    return source;
 };
+

config/mp/paths.js

@@ -11,14 +11,27 @@ const resolveApp = (relativePath) => path.resolve(resolveRoot(subDirName), relat
 
 const buildPath = process.env.BUILD_PATH || 'dist';
 
-const moduleFileExtensions = [
+let moduleFileExtensions = [
   'mp.js',
   'js',
   'mp.ts',
   'ts',
-  'json',
-  'wxs',
 ];
+if (process.env.NODE_ENV !== 'production') {
+    moduleFileExtensions = [
+        'dev.mp.js',
+        'dev.mp.ts',
+        'dev.js',
+        'dev.ts',
+    ].concat(moduleFileExtensions);
+} else {
+    moduleFileExtensions = [
+        'prod.mp.js',
+        'prod.mp.ts',
+        'prod.js',
+        'prod.ts',
+    ].concat(moduleFileExtensions);
+}
 
 // Resolve file paths in the same order as webpack
 const resolveModule = (resolveFn, filePath) => {

config/postcss-plugin/rpx2px.js

@@ -97,8 +97,8 @@ class Rpx2px {
             return val == 0 ? val : `calc(100vw / ${rpxUnit} * ${val})`;
         }
 
-        return value.replace(rpxGlobalRegExp, function (ele1, ele2) {
+        return value.replace(rpxGlobalRegExp, function ($0, $1) {
-            return type === 'rpx' ? ele2 : getValue(ele2);
+            return type === 'rpx' ? $1 : getValue($1);
         });
     }
 }

config/web/paths.js

@@ -25,7 +25,7 @@ const publicUrlOrPath = getPublicUrlOrPath(
 
 const buildPath = process.env.BUILD_PATH || 'build';
 
-const moduleFileExtensions = [
+let moduleFileExtensions = [
   'web.mjs',
   'mjs',
   'web.js',
@@ -34,10 +34,29 @@ const moduleFileExtensions = [
   'ts',
   'web.tsx',
   'tsx',
-  'json',
   'web.jsx',
   'jsx',
 ];
+if (process.env.NODE_ENV !== 'production') {
+    moduleFileExtensions = [
+        'dev.web.js',
+        'dev.web.ts',
+        'dev.web.tsx',
+        'dev.js',
+        'dev.ts',
+        'dev.tsx',
+    ].concat(moduleFileExtensions);
+}
+else {
+      moduleFileExtensions = [
+          'prod.web.js',
+          'prod.web.ts',
+          'prod.web.tsx',
+          'prod.js',
+          'prod.ts',
+          'prod.tsx',
+      ].concat(moduleFileExtensions);
+}
 
 // Resolve file paths in the same order as webpack
 const resolveModule = (resolveFn, filePath) => {

config/web/webpack.config.js

@@ -31,7 +31,8 @@ const createEnvironmentHash = require('./webpack/persistentCache/createEnvironme
 const oakPathTsxPlugin = require('../babel-plugin/oakPath');
 const oakRenderTsxPlugin = require('../babel-plugin/oakRender');
 const oakRouterPlugin = require('../babel-plugin/router');
-const oakRpxToPxPlugin = require('../babel-plugin/oakRpxToPx');
+const oakStylePlugin = require('../babel-plugin/oakStyle');
+const oakRpxToPxPlugin = require('../postcss-plugin/oakRpxToPx');
 
 // Source maps are resource heavy and can cause out of memory issue for large source files.
 const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
@@ -492,6 +493,7 @@ module.exports = function (webpackEnv) {
                                             oakPathTsxPlugin,
                                             oakRenderTsxPlugin,
                                             oakRouterPlugin,
+                                            // oakStylePlugin,
                                         ],
                                         // This is a feature of `babel-loader` for webpack (not Babel itself).
                                         // It enables caching results in ./node_modules/.cache/babel-loader/