vue用webpack打包时引入es2015插件

简介: 1、安装依赖包 $ npm install --save-div babel-preset-es2015 ps:babel-loader、babel-core应该是默认装好的,如果没有安装,请重新安装 2、修改【webpack.

1、安装依赖包

$ npm install --save-div babel-preset-es2015

ps:babel-loaderbabel-core应该是默认装好的,如果没有安装,请重新安装

2、修改【webpack.config.js】配置文件
找到 /\.js$/的rules,进行修改

 {
        test: /\.js$/,
        use: [{
          loader: 'babel-loader',
          options: {
             presets: ['es2015']
          }
        }],
        exclude: /node_modules/
      }

  

3、根目录下添加【.babelrc】文件
文件内容:

{
  "presets": ["es2015"]
}

  

打包

运行打包脚本查看效果,指令视情况而定

$ npm run build

  

目录
相关文章
|
10天前
|
JavaScript
webpack打包TS
webpack打包TS
|
22天前
Vue3拖拽插件(vuedraggable@next)
vuedraggable 是一款 Vue2 拖拽插件,可轻松实现列表项的拖拽排序与交互。通过简单配置,即可在不同区域间拖动元素并实现数据同步。支持多种事件监听和自定义样式。
Vue3拖拽插件(vuedraggable@next)
|
22天前
|
JavaScript API UED
Vue3使用触摸滑动插件(Swiper)
本文介绍如何在Vue2项目中使用Swiper插件实现触摸滑动功能,并封装了两种轮播图展示形式:首页轮播图(`type: banner`)和走马灯轮播图(`type: carousel`),以及信息展播模式(`type: broadcast`)。支持自定义轮播图片、区域尺寸、动画效果等属性。通过示例代码展示了不同切换动画及自定义效果,并提供了在线预览。适用于多种应用场景,提升用户体验。
Vue3使用触摸滑动插件(Swiper)
|
8天前
|
JavaScript 开发工具
vite如何打包vue3插件为JSSDK
【9月更文挑战第10天】以下是使用 Vite 打包 Vue 3 插件为 JS SDK 的步骤:首先通过 `npm init vite-plugin-sdk --template vue` 创建 Vue 3 项目并进入项目目录 `cd vite-plugin-sdk`。接着,在 `src` 目录下创建插件文件(如 `myPlugin.js`),并在 `main.js` 中引入和使用该插件。然后,修改 `vite.config.js` 文件以配置打包选项。最后,运行 `npm run build` 进行打包,生成的 `my-plugin-sdk.js` 即为 JS SDK,可在其他项目中引入使用。
|
6天前
webpack 打包多页面应用
webpack 打包多页面应用
|
20天前
|
前端开发 开发者
在前端开发中,webpack 作为一个强大的模块打包工具,为我们提供了丰富的功能和扩展性
【9月更文挑战第1天】在前端开发中,Webpack 作为强大的模块打包工具,提供了丰富的功能和扩展性。本文重点介绍 DefinePlugin 插件,详细探讨其原理、功能及实际应用。DefinePlugin 可在编译过程中动态定义全局变量,适用于环境变量配置、动态加载资源、接口地址配置等场景,有助于提升代码质量和开发效率。通过具体配置示例和注意事项,帮助开发者更好地利用此插件优化项目。
48 13
|
26天前
|
缓存 前端开发 JavaScript
Webpack 模块解析:打包原理、构造形式、扣代码补参数和全局导出
Webpack 模块解析:打包原理、构造形式、扣代码补参数和全局导出
22 1
|
26天前
|
JavaScript
vue中的插件概念是什么?新手小白如何在Vue中引入插件
【8月更文挑战第21天】vue中的插件概念是什么?新手小白如何在Vue中引入插件
31 1
|
30天前
|
前端开发 JavaScript API
|
20天前
|
前端开发 JavaScript 开发者
Angular与Webpack协同优化:打造生产级别的打包配置——详解从基础设置到高级代码拆分和插件使用
【8月更文挑战第31天】在现代前端开发中,优化应用性能和加载时间至关重要,尤其是对于使用Angular框架的项目。本文通过代码示例详细展示了如何配置Webpack,以实现生产级别的打包优化。从基础配置到生产环境设置、代码拆分,再到使用加载器与插件,每个步骤都旨在提升应用效率,确保快速加载和稳定运行。通过这些配置,开发者能更好地控制资源打包,充分发挥Webpack的强大功能。
26 0