diff --git a/config/babel-plugin/oakStyle.js b/config/babel-plugin/oakStyle.js new file mode 100644 index 0000000..23bbe75 --- /dev/null +++ b/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) + ); + } + }); + } + } + }, + }, + }; +}; diff --git a/config/loaders/tsx-loader.js b/config/loaders/tsx-loader.js index b33af12..c4d217b 100644 --- a/config/loaders/tsx-loader.js +++ b/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 options = this.getOptions() || {}; //获取配置参数 +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`) +}; + +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; }; + diff --git a/config/mp/paths.js b/config/mp/paths.js index a0a5de7..503e4ca 100644 --- a/config/mp/paths.js +++ b/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) => { diff --git a/config/babel-plugin/oakRpxToPx.js b/config/postcss-plugin/oakRpxToPx.js similarity index 100% rename from config/babel-plugin/oakRpxToPx.js rename to config/postcss-plugin/oakRpxToPx.js diff --git a/config/babel-plugin/rpx2px.js b/config/postcss-plugin/rpx2px.js similarity index 96% rename from config/babel-plugin/rpx2px.js rename to config/postcss-plugin/rpx2px.js index 05fb3e7..139c42f 100644 --- a/config/babel-plugin/rpx2px.js +++ b/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 type === 'rpx' ? ele2 : getValue(ele2); + return value.replace(rpxGlobalRegExp, function ($0, $1) { + return type === 'rpx' ? $1 : getValue($1); }); } } diff --git a/config/web/paths.js b/config/web/paths.js index dc80729..3ebc4ee 100644 --- a/config/web/paths.js +++ b/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) => { diff --git a/config/web/webpack.config.js b/config/web/webpack.config.js index f2e4ed4..cc67f69 100644 --- a/config/web/webpack.config.js +++ b/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/