Vue2.0 ES6语法降级ES5

由于部分低版本的手机还不支持ES6语法,将会导致vue报错。综合了网上的各种办法,我的项目现在终于成功降级ES5.

首先安装插件

npm install -D babel-preset-es2015  babel-core  babel-preset-stage-2 babel-loader

编辑配置文件

编辑/build/webpack.base.conf.js
编辑entry节点,变成如下

entry: {
    app: ['babel-polyfill', './src/main.js']
}

替换module.rules数组中的

{
        test: /\.js$/,
         loader: 'babel-loader',
         include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
       }

{
        test: /\.js$/,
        exclude: /node_modules/, // 处理除了nodde_modules里的js文件
        loader: 'babel-loader'
}

再根目录新建.babelrc内容为

{
  "presets": [
    "es2015",
    "stage-2"
  ],
  "plugins": [

  ]
}

如果使用了URLSearchParams,需要安装npm install url-search-params-polyfill --save,然后在使用了该对象的类头部引入import 'url-search-params-polyfill'

最后npm run build 编译。

验证是否成功

查看dist目录下编译出来的js里面是否还有const/let等ES6的语法,没有的话基本就成功了。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 webpack2和vue2已经不是新鲜东西了,满大街的文章在讲解webpack和vue,但是很多内容写的不是...
    技术宅小青年阅读 11,590评论 4 43
  • 十二、LESS教程 Less教程Less 安装Less 嵌套规则Less 操作Less 转义Less 函数 Les...
    茶茶点阅读 2,642评论 0 3
  • 学习笔记 原文地址:antDesignPro使用心得,快速开发必备。https://www.52pojie.cn/...
    kalshen阅读 44,794评论 8 85
  • 再浓烈的酒也无法 浇开阴郁的云朵 袅袅的白烟 撩情沸腾 光与暖 终挣不出 路途的远哀 任凭乌青魅影 四面八方盖下来
    梅芳的行影记阅读 1,319评论 0 0
  • 银行与投行、基金之间的关系是什么? 以一颗大树来比喻,银行好比树干,是整个经济运行的基础;投行和基金就是树枝和树叶...
    杨刀刀daoker阅读 818评论 0 0