didi / mpx

Mpx,一款具有优秀开发体验和深度性能优化的增强型跨端小程序框架

Home Page:https://mpxjs.cn

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[Bug report] ts文件编译失败

BigFly2333 opened this issue · comments

问题描述
微信原生项目编译到微信小程序,ts编译失败,控制台没有报错,但是编译结果中没有wmxl、wxss文件,js文件中没有js业务代码,会把template编译到js中
src源码目录结构
image
dist编译后目录结构
image
dist/wx/my/index.js中编译后代码
image

环境信息描述
至少包含以下部分:

  1. 系统类型:Mac
  2. mpx版本:2.8.40
    image
  3. src源码为,微信原生 + ts,目标编译环境为微信小程序平台
    image

最简复现demo
源码下载地址:https://dev.cdn.haimati.cn/mpx-miniapp.zip
vue.config.js配置

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  pluginOptions: {
    mpx: {
      srcMode: 'wx',
      plugin: {
        hackResolveBuildDependencies: ({ files, resolveDependencies }) => {
          const path = require('path')
          const packageJSONPath = path.resolve('package.json')
          if (files.has(packageJSONPath)) files.delete(packageJSONPath)
          if (resolveDependencies.files.has(packageJSONPath)) {
            resolveDependencies.files.delete(packageJSONPath)
          }
        }
      },
      loader: {}
    }
  },
  /**
   * 如果希望node_modules下的文件时对应的缓存可以失效,
   * 可以将configureWebpack.snap.managedPaths修改为 []
   */
  configureWebpack(config) {
    return {
      module: {
        rules: [
          {
            test: /\.ts$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
          }
        ]
      }
    }
  }
})

babel.config.json配置

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "shippedProposals": true
      }
    ],
    "@babel/preset-typescript"
  ],
  "plugins": [
    [
      "@babel/transform-runtime",
      {
        "corejs": 3,
        "version": "^7.10.4"
      }
    ],
    "@mpxjs/babel-plugin-inject-page-events"
  ],
  "sourceType": "unambiguous",
  "env": {
    "test": {
      "presets": [
        [
          "@babel/env",
          {
            "shippedProposals": true
          }
        ]
      ]
    }
  }
}

tsconfig.json配置

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "noImplicitThis": true,
    "strictNullChecks": true,
    "moduleResolution": "node",
    "lib": [
      "esnext",
      "dom",
      "dom.iterable"
    ],
    "typeRoots": [
      "./node_modules/@types/",
      "./typings"
    ],
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  },
  "include": ["src"]
}

https://github.com/didi/mpx/releases/tag/v2.8.49
已修复,不过需要调整脚手架内置的resolve.extensions的解析顺序,后续我们会再新的脚手架版本中调整,在此之前可以在项目配置中添加如下代码以覆盖脚手架配置:

// vue.config.js
module.exports = defineConfig({
  // ...
  configureWebpack(config) {
    config.resolve.extensions = ['.mpx', '.ts', '.js', '.wxml', '.vue']
  }
})