New project with vue2 + typescript and npm run build cannot convert code correctly
Version
4.5.19
Environment info
win 10
node 16.15.0
npm 8.5.5
yarn 1.22.19
Steps to reproduce
1 Use vue-cli to create a new project
vue create demo
choose Manually select features
choose add typescript
choose 2.x
choose Yes
choose Yes
choose default option
choose default option
choose default option
choose No
2 Delete all words in entry main.ts but add some test code:
const str = 'abcde'
const obj = {
getStr: () => str
}
obj.getStr();
3 Add vue.config.js like:
module.exports = {
productionSourceMap: false
}
4 npm run build, then the build result js dist/js/app.xxx.js has " let、=> " syntax. It's unexpected! Refer to the vue-cli 4.5.19 release notes, I add ie to .browserslistrc, like:
> 1%
last 2 versions
not dead
ie 9
ie 10
ie 11
5 npm run build again, but nothing changed. In my opinion, if ie11 in .browserslistrc, the build result js will only has es5 syntax. if not ie in .browserslistrc, the dist js will be the modern es6+ syntax. So I use vue-cli to create another new project but without typescript, change and test .browserslistrc as above, the build result js is what I expected.
What is expected?
If ie11 in .browserslistrc, the build result js only has es5 syntax. If no ie11 in .browserslistrc, the build result js only has es6+ syntax.
What is actually happening?
create project with typescript, modify the .browserslistrc, the build result js is wrong. create project without typescript, modify the .browserslistrc, the build result js is right. So I think it's a bug when vue-cli create with typescript.
change your babel.config.js file content:
module.exports = {
presets: [
['@vue/cli-plugin-babel/preset', {
"targets": { // https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/babel-preset-app#targets
"chrome": "67",
"ie": "11"
},
"useBuiltIns": false, // https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/babel-preset-app#usebuiltins
}]
],
};
same problem