具有IE11支持的vue cli3 lib [英] vue cli3 lib with IE11 support

问题描述

根据文档( https://cli.vuejs.org/guide/build-targets.html#library )，对我来说还不清楚如何集成babel以使所构建的库对IE11友好...我必须从Vue组件制作一个npm包.>

我在package.json中的npm脚本是: vue-cli-service build --target lib src/MyComponent.vue

我在package.json中放入了正确的浏览器列表".

似乎我必须使用带有预设的babel.config.js.

不确定要安装什么作为开发依赖项以及要配置什么...

任何人都可以使用示例库或一些指南吗?

解决方案

对我自己的答案:-)有记录，但在几个地方.所以...

• 添加以下开发依赖项:

npm install --save-dev @ vue/cli-plugin-babel @ babel/preset-env

• 添加此依赖项:

npm install --save @ babel/polyfill current-script-polyfill

• 在主Vue文件中，先导入"current-script-polyfill"
• 实际上是在package.json中定义一个<浏览器列表
• 确实有一个 babel.config.js 和

 预设:[['@ vue/app']]} 

编辑:现在，我们使用 .browserlistrc 文件代替package.json中的定义.这是我们使用的，谢谢您的询问:

 >1％最近2个版本不是<11 

According to the documentation (https://cli.vuejs.org/guide/build-targets.html#library), it's not clear to me how to integrate babel to make the lib built be IE11-friendly... I have to make a npm package from a Vue component.

My npm script in package.json is: vue-cli-service build --target lib src/MyComponent.vue

I've put a correct "browserslist" in package.json.

It seems that I have to use a babel.config.js with a preset.

Not sure of what to install as dev dependencies and what to configure...

Anyone has a working sample lib or some guidance, please?

解决方案

Answering to myself :-) It was documented but at several places. So...

• Add these dev dependencies:

npm install --save-dev @vue/cli-plugin-babel @babel/preset-env

• Add this dependency:

npm install --save @babel/polyfill current-script-polyfill

• In your main Vue file, import 'current-script-polyfill' before anything else
• Indeed define a browserslist in package.json
• Indeed have a babel.config.js with

    presets: [
      ['@vue/app']
    ]
  }

Edit : now we use a .browserlistrc file instead of definition in package.json. Here is what we use, thanks for asking:

> 1%
last 2 versions
not ie < 11

这篇关于具有IE11支持的vue cli3 lib的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！