seek a solution about the dist of vueuse that is not escaped from es6 to es5

Hello, antfu! I encountered a problem that I found the dist of vueuse didn’t transfrom es6 to es5。So when i installed vueuse in my project and built it, the packaging product of my project contains es6 grammar such as const、Arrow function .etc。

I have a question that why the code in the npm package and cdn link of vueuse is not translated intoes5 。I think perhaps installing npm packages directly or introducing cdn links in some of the company’s projects will cause problems with low-version models so that we cannot use vususe in out projects。

I have tried to solve this question by myself。I think the config about babel in babel.config.js and vue.config.js is effective, because the code in my project has all successfully been translated into es5。 The version of my babel is >7, I wonder if it is my babel that does not translate the 3rd library in node_modules, I added it into the config.module, such as config.module.include.add('/node_modules/@vueuse'), but still failed。

Here is the part of the config of my vue.config.js and babel.config.js:

// vue.config.js
    config.module
      .rule('js')
      .rule('vue')
      .include
      .add('/packages')
      .add('/examples')
      .add('/node_modules/@vueuse')
      .end()
      .use('babel')
      .loader('babel-loader')
      .tap((options) => options);

// babel.config.js
module.exports = {
  presets: [
    ['@vue/cli-plugin-babel/preset', {
      useBuiltIns: 'usage',
    }],
  ],
  plugins: [
    [
      '@babel/plugin-transform-runtime', {
        corejs: 3,
      },
    ],
  ],
};

I really hope to find a solution from you, thank you! 😁

[userquin]

@PaulChess I use this setup with vue-cli-service, but not tested with @vueuse, maybe you only need to add transpileDependencies on vue.config.js:

• install babel polyfill as dev dependency, for example: "@babel/polyfill": "^7.0.0-beta.49"
• add babel.config.js to the root directory of the project (you already have it):

module.exports = {
  "presets": [
    ["@vue/app", {
        "useBuiltIns": "entry"
    }],
    ["@babel/preset-env", {
      "modules": false
    }]
  ]
};

• enable modern flag on package.json: "build": "vue-cli-service build --modern"
• add import "@babel/polyfill"; at top of main.js.
• add transpileDependencies entry on vue.config.js file, for example I transpile vuetify, just include there @vueuse packages you use:

module.exports = {
  transpileDependencies: ["vuetify"],
  ...

[PaulChess]

@userquin Thank you for your help! I have just tried the method you provided, it works! I forgot to add transpileDependencies option in my vue.config.js. So we can indeed compile vueuse in our projects.