Vue 添加自定义 JS 文件参与 ES6 转义

简介: 版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82711342 ...
版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82711342

Vue 添加自定义 JS 文件参与 ES6 转义

vue 中可能存在部分 JS 文件使用了 ES6 语法,但默认不会被 babel-loader 扫描到,从而出现编译后的项目 ES6 语法没有被转义

更多精彩

报错信息

  1. 下列报错信息就是说明在 ::node_modules/quill-image-extend-module/index.js:: 文件中存在 ES6 的语法糖
  2. 由于目前大部分浏览器默认不支持 ES6 语法,所以项目编译后如果没有把 ES6 语法转义成 ES5 语法,浏览器则会报错
ERROR in static/js/vendor.9447dc694e95071dbce3.js from UglifyJs
Unexpected token operator «=», expected punc «,» [./node_modules/quill-image-extend-module/index.js:12,0][static/js/vendor.9447dc694e95071dbce3.js:28927,35]

  Build failed with errors.

解决方式

  1. 在 ::webpack.base.conf.js:: 中添加如下语法
{
  test: /\.js$/,
  loader: 'babel-loader',
  include: [
    resolve('src'),
    resolve('test'),
      // 只有这一行是添加的,由于指定自定义扫描文件
    resolve('node_modules/quill-image-extend-module/index.js')
  ],
},
目录
相关文章
|
4天前
|
前端开发 JavaScript
使用JavaScript实现复杂功能:构建一个自定义的拖拽功能
使用JavaScript实现复杂功能:构建一个自定义的拖拽功能
|
6天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
10 0
|
22天前
|
缓存 JavaScript 数据安全/隐私保护
js开发:请解释什么是ES6的Proxy,以及它的用途。
`ES6`的`Proxy`对象用于创建一个代理,能拦截并自定义目标对象的访问和操作,应用于数据绑定、访问控制、函数调用的拦截与修改以及异步操作处理。
17 3
|
22天前
|
JavaScript
js开发:请解释什么是ES6的类(class),并说明它与传统构造函数的区别。
ES6的类提供了一种更简洁的面向对象编程方式,对比传统的构造函数,具有更好的可读性和可维护性。类使用`class`定义,`constructor`定义构造方法,`extends`实现继承,并可直接定义静态方法。示例展示了如何创建`Person`类、`Student`子类以及它们的方法调用。
20 2
|
23天前
|
自然语言处理 JavaScript 网络架构
js开发:请解释什么是ES6的箭头函数,以及它与传统函数的区别。
ES6的箭头函数以`=>`定义,简化了函数写法,具有简洁语法和词法作用域的`this`。它无`arguments`对象,不能用作构造函数,不支持`Generator`,且不改变`this`、`super`、`new.target`绑定。适用于简短表达式,常用于异步编程和高阶函数。
17 5
|
3天前
|
JavaScript 搜索推荐 测试技术
深入了解 Vue CLI:现代化 Vue.js 项目开发工具
深入了解 Vue CLI:现代化 Vue.js 项目开发工具
|
7天前
|
JavaScript
vue element 导出blob后台文件流xlsx文件自动下载(且规避乱码)
vue element 导出blob后台文件流xlsx文件自动下载(且规避乱码)
|
22天前
|
JavaScript 前端开发
js开发:请解释什么是ES6的async/await,以及它如何解决回调地狱问题。
ES6的`async/await`是基于Promise的异步编程工具,能以同步风格编写异步代码,提高代码可读性。它缓解了回调地狱问题,通过将异步操作封装为Promise,避免回调嵌套。错误处理更直观,类似同步的try...catch。
|
22天前
|
JavaScript
js开发:请解释什么是ES6的Generator函数,以及它的用途。
ES6的Generator函数是暂停恢复的特殊函数,用yield返回多个值,适用于异步编程和流处理,解决了回调地狱问题。
15 6
|
22天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可为任意类型,有序且支持get、set、has、delete操作;Set存储唯一值,提供add、delete、has方法。两者皆可迭代。示例展示了Map和Set的基本用法,如添加、查询、删除元素。
13 2