默认的 babel 配置并不生效

[falstack]

Version

3.7.0

Reproduction link

https://github.com/vuejs/vue-cli

Environment info

  System:
    OS: macOS Mojave 10.14.1
    CPU: (4) x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz
  Binaries:
    Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.15.3/bin/npm
  Browsers:
    Chrome: 74.0.3729.157
    Firefox: Not Found
    Safari: 12.0.1
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.0.0
    @vue/babel-preset-app:  3.7.0
    @vue/babel-preset-jsx:  1.0.0
    @vue/babel-sugar-functional-vue:  1.0.0
    @vue/babel-sugar-inject-h:  1.0.0
    @vue/babel-sugar-v-model:  1.0.0
    @vue/babel-sugar-v-on:  1.0.0
    @vue/cli-overlay:  3.7.0
    @vue/cli-plugin-babel: ^3.7.0 => 3.7.0
    @vue/cli-plugin-eslint: ^3.7.0 => 3.7.0
    @vue/cli-service: ^3.7.0 => 3.7.0
    @vue/cli-shared-utils:  3.7.0
    @vue/component-compiler-utils:  2.6.0
    @vue/preload-webpack-plugin:  1.1.0
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^5.0.0 => 5.2.2
    vue: ^2.6.10 => 2.6.10
    vue-eslint-parser:  5.0.0
    vue-hot-reload-api:  2.3.3
    vue-loader:  15.7.0
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.5.21 => 2.6.10
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

run vue create test-babel create a project

chang app.vue:

<template>
  <i />
</template>

<script>
export default {
  props: {
    test: {
      type: Number
    }
  }
}
</script>

change package.json add build script：

"build:vue-cli": "vue-cli-service build --target lib --name test -entry src/app.vue"

run npm run build:vue-cli
see output file：dist/test.umd.js
search number, you will see the number polyfill
now, change babel.config.js：

module.exports = {
  presets: [
    [
      '@vue/app',
      {
        targets: {
          node: 'current'
        }
      }
    ]
  ]
}

rebuild output file and search number, the polyfill clean

What is expected?

babel.config.js can work

What is actually happening?

babel.config.js not work

---

导致 Node 端把组件加入到 externals 里之后内存泄漏

[haoqunjiang]

删除缓存后再试一下？

rm -rf node_modules/.cache

我无法复现你说的这个问题

[falstack]

@sodatea

我开了个 repo 来复现：reproduction-vue-cli-babel-bug

可以看dist/test.umd.js文件里面，搜number或者global 就能看到 polyfill

[haoqunjiang]

然后我改掉 babel.config.js，重新跑了一遍 yarn build:vue-cli 之后就正常了啊？

[haoqunjiang]

哦哦，明白了，你的意思是默认配置就该这样

[haoqunjiang]

为什么要这样设置？默认的 polyfill 是根据 browserslist 配置来添加的。默认是

"browserslist": [
  "> 1%",
  "last 2 versions"
]

所以如果用了 Number 的话会自动添加 Number polyfill，这是 @babel/preset-env 的默认行为，有什么问题呢？会怎么内存泄漏？

[falstack]

@sodatea
仔细想想应该是我的问题，我使用 vue-cli 打包的组件，我让它在 Node 端去执行，然后因为 polyfill 的原因导致了内存泄漏

但 Node 端应该使用单独打包，不应该与浏览器打包的 babel config 一致

我应该直接导出组件本身供外部引用，而不仅仅是打包后的组件

[falstack]

@sodatea
内存泄漏的原因是

1. vue-cli 默认的 useBuiltIns 是 usage
2. 组件中用了 Number 做 props 的 validation，Number 的 polyfill 被打包到 package 中
3. 这个 polyfill 对global进行了定义
4. 并且这个组件被加到了 webpack 的 externals 里面，代码会 build 到 vue-server-bundle.json 中
5. SSR 的运行环境是 runInNewContext: true，每次请求进来之后都会重新创建上下文