webpack build vue2.7.14 template compiler es6 syntax not transferred

webaddkevin commented 1 year ago

Version

2.7.14

Reproduction link

Steps to reproduce

vue2.7.14 use @vue/compiler-src remove vue-template-es2015-compiler It will cause webpack to compile vue template es6 syntax without escaping

What is expected?

template compiler es6 syntax to es5 syntax

What is actually happening?

webpack to compiler vue template es6 syntax not transferred

zhoushengdong commented 1 year ago

I had the same problem.

cy920820 commented 1 year ago

Similarly, for an older project on my end, I found that a Vue2.7 project was built using Vue CLI. After packaging and building it, I found an error in the vendor chunks package on the old model, and unexpectedly found ES6+syntax inside. I've been exploring for a long time, but I haven't solved it yet @yyx990803 尤大有解决方案吗 😅

cy920820 commented 1 year ago

The version information is also v2.7.14. Building tools：vue-cli4. Dependency List：

{
  "name": "pakistan-h5-barwaqt_activities",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "rimraf ./src/entries && vue-cli-service serve --mode development",
    "serve:dev": "vue-cli-service serve --mode dev",
    "build": "vue-cli-service build --mode development",
    "build:dev": "vue-cli-service build --mode dev",
    "build:master": "vue-cli-service build --mode pro",
    "lint": "vue-cli-service lint",
    "analyzer": "vue-cli-service build --mode analyzer"
  },
  "dependencies": {
    "@beyonk/google-fonts-webpack-plugin": "^1.7.0",
    "@ivanv/vue-collapse-transition": "^1.0.2",
    "axios": "^0.24.0",
    "babel-plugin-import": "^1.13.3",
    "clipboard": "^2.0.11",
    "core-js": "^3.6.5",
    "crypto-js": "^4.1.1",
    "dayjs": "^1.11.6",
    "firebase": "^9.17.2",
    "google-fonts-plugin": "^5.0.2",
    "json-bigint": "^1.0.0",
    "lib-flexible": "^0.3.2",
    "px2rem-loader": "^0.1.9",
    "qs": "^6.10.1",
    "register-service-worker": "^1.7.1",
    "shepherd.js": "8.3.1",
    "vant": "^2.12.30",
    "vee-validate": "3",
    "vue": "2.7.14",
    "vue-count-to": "^1.0.13",
    "vue-i18n": "8",
    "vue-lazyload": "^1.3.3",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-pwa": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "compression-webpack-plugin": "^5.0.1",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "postcss-import": "^14.0.2",
    "postcss-loader": "^3.0.0",
    "postcss-url": "^10.1.3",
    "rimraf": "^3.0.2",
    "svg-sprite-loader": "^6.0.11",
    "vue-template-babel-compiler": "^2.0.0",
    "vue-template-compiler": "^2.7.14"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

Test model: Galaxy J2 Prime System version: Android 6.0.1 Error message：

cy920820 commented 1 year ago

Does anyone come to take a look at this problem? thanks

keminu commented 1 year ago

I had the same problem.

webaddkevin commented 1 year ago

我是用patch-package 把 vue-template-es2015-compiler这个包加了回来。。vue-loader 15 transpileOptions 配置了没生效

cy920820 commented 1 year ago

我是用patch-package 把 vue-template-es2015-compiler这个包加了回来。。vue-loader 15 transpileOptions 配置了没生效

这个能解决三方 vendors-chunks 的编译问题吗？

webaddkevin commented 1 year ago

我是用patch-package 把 vue-template-es2015-compiler这个包加了回来。。vue-loader 15 transpileOptions 配置了没生效

这个能解决三方 vendors-chunks 的编译问题吗？

不能啊，你这个三方的编译是不是应该跟@vue/cli-service有关啊

yyx990803 commented 10 months ago

Tested with both CLI ~4.5.18 and CLI 5.0.8, both correctly transpiles expressions in template expressions.

Please note that for Vue 2.7, template expressions go through the same loader pipelines as normal JS. This means syntax lowering will be processed by babel-loader and its config, not through vue-template-es2015-compiler anymore. Make sure your babel config or browserslist target in package.json includes the browser range you want to support.

webaddkevin commented 10 months ago

Tested with both CLI ~4.5.18 and CLI 5.0.8, both correctly transpiles expressions in template expressions.

Please note that for Vue 2.7, template expressions go through the same loader pipelines as normal JS. This means syntax lowering will be processed by babel-loader and its config, not through vue-template-es2015-compiler anymore. Make sure your babel config or browserslist target in package.json includes the browser range you want to support.

tanks,I just changed the babel-loader config and it does work

cy920820 commented 10 months ago

Tested with both CLI ~4.5.18 and CLI 5.0.8, both correctly transpiles expressions in template expressions. Please note that for Vue 2.7, template expressions go through the same loader pipelines as normal JS. This means syntax lowering will be processed by babel-loader and its config, not through vue-template-es2015-compiler anymore. Make sure your babel config or browserslist target in package.json includes the browser range you want to support.

tanks,I just changed the babel-loader config and it does work

Can you share your configuration? Let me refer to it @webaddkevin

vuejs / vue