feat: trans dep

packages/vue-cli-plugin-mpx/config/babel.js

@@ -0,0 +1,126 @@
+const path = require('path')
+const babel = require('@babel/core')
+const { isWindows } = require('@vue/cli-shared-utils')
+
+function getDepPathRegex (dependencies) {
+  const deps = dependencies.map((dep) => {
+    if (typeof dep === 'string') {
+      const depPath = path.join('node_modules', dep, '/')
+      return isWindows
+        ? depPath.replace(/\\/g, '\\\\') // double escape for windows style path
+        : depPath
+    } else if (dep instanceof RegExp) {
+      return dep.source
+    }
+
+    throw new Error(
+      'transpileDependencies only accepts an array of string or regular expressions'
+    )
+  })
+  return deps.length ? new RegExp(deps.join('|')) : null
+}
+
+/** @type {import('@vue/cli-service').ServicePlugin} */
+function resolveBabelConfig (api, options, config, target) {
+  const cliServicePath = path.dirname(require.resolve('@vue/cli-service'))
+  const mpxServicePath = path.dirname(require.resolve('@mpxjs/mpx-cli-service'))
+
+  // try to load the project babel config;
+  // if the default preset is used,
+  // there will be a VUE_CLI_TRANSPILE_BABEL_RUNTIME env var set.
+  // the `filename` field is required
+  // in case there're filename-related options like `ignore` in the user config
+  babel.loadPartialConfigSync({ filename: api.resolve('src/main.js') })
+
+  const testPath = api.resolve('test')
+  const srcPath = api.resolve('src')
+  const jsRule = config.module
+    .rule('js')
+    .test(/\.m?jsx?$/)
+    .exclude.add((filepath) => {
+      const SHOULD_SKIP = true
+      const SHOULD_TRANSPILE = false
+
+      // With data URI support in webpack 5, filepath could be undefined
+      if (!filepath) {
+        return SHOULD_SKIP
+      }
+
+      // Always transpile js in vue files
+      if (/\.vue\.jsx?$/.test(filepath)) {
+        return SHOULD_TRANSPILE
+      }
+      // Exclude dynamic entries from cli-service
+      if (filepath.startsWith(cliServicePath) || filepath.startsWith(mpxServicePath)) {
+        return SHOULD_SKIP
+      }
+
+      if (filepath.startsWith(testPath) || filepath.startsWith(srcPath)) {
+        return SHOULD_TRANSPILE
+      }
+
+      if (/\.mpx\.js/.test(filepath)) {
+        return SHOULD_TRANSPILE
+      }
+
+      // To transpile `@babel/runtime`, the config needs to be
+      // carefully adjusted to avoid infinite loops.
+      // So we only do the tranpilation when the special flag is on.
+      if (getDepPathRegex(['@babel/runtime']).test(filepath)) {
+        return process.env.VUE_CLI_TRANSPILE_BABEL_RUNTIME
+          ? SHOULD_TRANSPILE
+          : SHOULD_SKIP
+      }
+
+      // if `transpileDependencies` is set to true, transpile all deps
+      if (options.transpileDependencies === true) {
+        // Some of the deps cannot be transpiled, though
+        // https://stackoverflow.com/a/58517865/2302258
+        const NON_TRANSPILABLE_DEPS = [
+          'core-js',
+          'webpack',
+          'webpack-4',
+          'css-loader',
+          'mini-css-extract-plugin',
+          'promise-polyfill',
+          'html-webpack-plugin',
+          'whatwg-fetch'
+        ]
+        const nonTranspilableDepsRegex = getDepPathRegex(NON_TRANSPILABLE_DEPS)
+        return nonTranspilableDepsRegex.test(filepath)
+          ? SHOULD_SKIP
+          : SHOULD_TRANSPILE
+      }
+
+      // Otherwise, check if this is something the user explicitly wants to transpile
+      if (Array.isArray(options.transpileDependencies)) {
+        const transpileDepRegex = getDepPathRegex(options.transpileDependencies)
+        if (transpileDepRegex && transpileDepRegex.test(filepath)) {
+          return SHOULD_TRANSPILE
+        }
+      }
+
+      // Don't transpile node_modules
+      return /node_modules/.test(filepath) ? SHOULD_SKIP : SHOULD_TRANSPILE
+    })
+    .end()
+
+  jsRule
+    .use('babel-loader')
+    .loader(require.resolve('babel-loader'))
+    .options({
+      cacheCompression: false,
+      ...api.genCacheConfig(
+        'babel-loader',
+        {
+          '@babel/core': require('@babel/core/package.json').version,
+          'babel-loader': require('babel-loader/package.json').version,
+          modern: !!process.env.VUE_CLI_MODERN_BUILD,
+          browserslist: api.service.pkg.browserslist
+        },
+        ['babel.config.js', '.browserslistrc']
+      )
+    })
+}
+
+module.exports.resolveBabelConfig = resolveBabelConfig

packages/vue-cli-plugin-mpx/config/base.js

@@ -28,28 +28,6 @@ function changeStyleVueRuleToMpx (config, name) {
   store.set('mpx', value)
 }
 
-/**
- * 编译依赖
- * @param { (string|RegExp) [] } transpileDependencies
- * @returns
- */
-function genTranspileDepRegex (transpileDependencies) {
-  const path = require('path')
-  const { isWindows } = require('@vue/cli-shared-utils')
-  const deps = transpileDependencies.map((dep) => {
-    if (typeof dep === 'string') {
-      const depPath = path.join('node_modules', dep, '/')
-      return isWindows
-        ? depPath.replace(/\\/g, '\\\\') // double escape for windows style path
-        : depPath
-    } else if (dep instanceof RegExp) {
-      return dep.source
-    }
-    return ''
-  })
-  return deps.length ? new RegExp(deps.join('|')) : null
-}
-
 /**
  * 获取 mpx webpack plugin 配置
  * @param { import('@vue/cli-service').PluginAPI } api
@@ -382,24 +360,6 @@ module.exports.resolveBaseConfig = function (api, options, config, target) {
     .use('mpx-wxs-pre-loader')
     .loader(require.resolve(MpxWebpackPlugin.wxsPreLoader().loader))
 
-  const transpileDepRegex = genTranspileDepRegex(
-    options.transpileDependencies || []
-  )
-
-  config.module
-    .rule('js')
-    .test(/\.js$/)
-    .include.add(
-      (filepath) => transpileDepRegex && transpileDepRegex.test(filepath)
-    )
-    .add((filepath) => /\.mpx\.js/.test(filepath)) // 处理 mpx 转 web 的情况，vue-loader 会将 script block fake 出一个 .mpx.js 路径，用以 loader 的匹配
-    .add(api.resolve('src'))
-    .add(/@mpxjs/)
-    .add(api.resolve('test'))
-    .end()
-    .use('babel-loader')
-    .loader(require.resolve('babel-loader'))
-
   config.resolve.extensions.add('.mpx').add('.js').add('.wxml').add('.ts')
 
   config.resolve.modules.add('node_modules')

packages/vue-cli-plugin-mpx/generator/index.js

@@ -37,6 +37,7 @@ module.exports = function (api, options) {
     vue: {
       // eslint-disable-next-line no-template-curly-in-string
       outputDir: '{outputDir}',
+      transpileDependencies: true,
       pluginOptions: {
         mpx: {
           plugin: {

packages/vue-cli-plugin-mpx/index.js

@@ -4,6 +4,7 @@ const { registerBuildCommand } = require('./commands/build')
 const { registerServeCommand } = require('./commands/serve')
 const { getCurrentTarget } = require('@mpxjs/cli-shared-utils')
 const path = require('path')
+const { resolveBabelConfig } = require('./config/babel')
 
 function normalizeOutputPath (api, options, target) {
   const { outputDir } = options
@@ -39,6 +40,7 @@ module.exports = function (api, options) {
   // 注入基础配置
   api.chainWebpack((config) => {
     resolveBaseConfig(api, options, config, target)
+    resolveBabelConfig(api, options, config, target)
   })
 }
 

yarn.lock

@@ -5270,6 +5270,11 @@ buffer-from@^1.0.0:
   resolved "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
   integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
 
+buffer-json@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/buffer-json/-/buffer-json-2.0.0.tgz#f73e13b1e42f196fe2fd67d001c7d7107edd7c23"
+  integrity sha512-+jjPFVqyfF1esi9fvfUs3NqM0pH1ziZ36VP4hmA/y/Ssfo/5w5xHKfTw9BwQjoJ1w/oVtpLomqwUHKdefGyuHw==
+
 buffer@^5.2.0, buffer@^5.2.1, buffer@^5.5.0:
   version "5.7.1"
   resolved "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0"
@@ -5378,6 +5383,18 @@ cache-content-type@^1.0.0:
     mime-types "^2.1.18"
     ylru "^1.2.0"
 
+cache-loader@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/cache-loader/-/cache-loader-4.1.0.tgz#9948cae353aec0a1fcb1eafda2300816ec85387e"
+  integrity sha512-ftOayxve0PwKzBF/GLsZNC9fJBXl8lkZE3TOsjkboHfVHVkL39iUEs1FO07A33mizmci5Dudt38UZrrYXDtbhw==
+  dependencies:
+    buffer-json "^2.0.0"
+    find-cache-dir "^3.0.0"
+    loader-utils "^1.2.3"
+    mkdirp "^0.5.1"
+    neo-async "^2.6.1"
+    schema-utils "^2.0.0"
+
 cacheable-request@^2.1.1:
   version "2.1.4"
   resolved "https://registry.npmjs.org/cacheable-request/-/cacheable-request-2.1.4.tgz#0d808801b6342ad33c91df9d0b44dc09b91e5c3d"
@@ -8076,7 +8093,7 @@ find-cache-dir@^2.0.0:
     make-dir "^2.0.0"
     pkg-dir "^3.0.0"
 
-find-cache-dir@^3.3.1:
+find-cache-dir@^3.0.0, find-cache-dir@^3.3.1:
   version "3.3.2"
   resolved "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz#b30c5b6eff0730731aea9bbd9dbecbd80256d64b"
   integrity sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==
@@ -11139,7 +11156,7 @@ loader-runner@^4.1.0, loader-runner@^4.2.0:
   resolved "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"
   integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==
 
-loader-utils@^1.0.2, loader-utils@^1.1.0:
+loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
   version "1.4.2"
   resolved "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz#29a957f3a63973883eb684f10ffd3d151fec01a3"
   integrity sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==
@@ -12108,7 +12125,7 @@ negotiator@0.6.3, negotiator@^0.6.2:
   resolved "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
   integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
 
-neo-async@^2.5.0, neo-async@^2.6.2:
+neo-async@^2.5.0, neo-async@^2.6.1, neo-async@^2.6.2:
   version "2.6.2"
   resolved "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
@@ -14553,7 +14570,7 @@ saxes@^5.0.1:
   dependencies:
     xmlchars "^2.2.0"
 
-schema-utils@^2.6.5:
+schema-utils@^2.0.0, schema-utils@^2.6.5:
   version "2.7.1"
   resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
   integrity sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==