es7如何跑起来装饰器

今天学习es7新特性装饰器时,代码提示语法错误,babel照着以前的方法转码也不成功,故写下此文谈谈如何解决

大致步骤如下:
1.安装babel转码工具
2.安装第三方插件,用于支持decorators
3.配置jsconfig.json解决vscode提示语法错误
4.babel打包成功运行

注:我这里没有配置.babelrc文件

1,2.npm install babel-cli babel-plugin-transform-decorators-legacy babel-register --save-dev

3.jsconfig.json

{
    "compilerOptions": {
        "experimentalDecorators": true
    }
}

4.package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel --plugins transform-decorators-legacy src -d lib"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-register": "^6.26.0"
  },
  "dependencies": {
    "babel-cli": "^6.26.0"
  }
}

最后执行打包命令:npm run build,即可成功打包代码,并且可在node环境下运行

运行也可使用require,不过还是建议使用上面那种

require('babel-register')({
    plugins: ['transform-decorators-legacy']
});
require("./input.js")
(0)

相关推荐

  • Webpack最详解

    WEB前端开发社区 昨天 JavaScript模块打包的概念已经出现一段时间了.RequireJS在2009年首次发声,之后Browserify粉墨登场.接着各种打包工具如雨后春笋纷纷涌现.而webp ...

  • 每天学一点ES6(一)开始

    最近学习vue,发现很多用法都不会了,虽然照猫画虎可以跑起来,但是总感觉很朦胧,是是而非的感觉不太好. 听说这些都是ES6的用法,所以决定要学习一下ES6 ES6 全称:ECMASctipt 6 简称 ...

  • 配置vue的jsx写法以及postcss

    继续上一篇 https://www.cnblogs.com/chenyingying0/p/12798050.html 安装一些组件 cnpm i postcss-loader autoprefixe ...

  • ES6 - 基础学习(1): 开发环境搭建

    现在Chrome浏览器已经很好的支持ES6了,但有些低版本的浏览器或其他浏览器还是不支持ES6的语法,因此实际项目开发或上线过程中就需要把ES6的语法转变成ES5的语法.项目开发过程中 Webpack ...

  • 你必须要知道的babel二三事

    你必须要知道的babel二三事

  • vue安装babel-polyfill插件,解决低版本浏览器不支持ES6新语法的问题

    vue安装babel-polyfill插件,解决低版本浏览器不支持ES6新语法的问题

  • Python 中的函数装饰器和闭包

    函数装饰器可以被用于增强方法的某些行为,如果想自己实现装饰器,则必须了解闭包的概念. 装饰器的基本概念 装饰器是一个可调用对象,它的参数是另一个函数,称为被装饰函数.装饰器可以修改这个函数再将其返回, ...

  • Selenium2+python自动化55-unittest之装饰器(@classmethod)

    前言 前面讲到unittest里面setUp可以在每次执行用例前执行,这样有效的减少了代码量,但是有个弊端,比如打开浏览器操作,每次执行用例时候都会重新打开,这样就会浪费很多时间. 于是就想是不是可以 ...

  • 设计模式-装饰器模式

    装饰器模式 定义 装饰器模式也叫包装模式 在不改变原有对象的基础上,把功能附加到对象上,提供了比继承更有弹性的替代方案 能够扩展原有对象的功能 属于结构型模式 生活中的例子 买煎饼 我们煎饼可以加鸡蛋 ...

  • PHP设计模式之装饰器模式

    PHP设计模式之装饰器模式 工厂模式告一段落,我们来研究其他一些模式.不知道各位大佬有没有尝试过女装?据说女装大佬程序员很多哟.其实,今天的装饰器模式就和化妆这件事很像.相信如果有程序媛MM在的话,马 ...

  • [PHP小课堂]PHP设计模式之装饰器模式

    [PHP小课堂]PHP设计模式之装饰器模式 关注公众号:[硬核项目经理]获取最新文章 添加微信/QQ好友:[DarkMatterZyCoder/149844827]免费得PHP.项目管理学习资料

  • 3年工作必备 装饰器模式

    回复"000"获取大量电子书 大家好,我是老田,从今天开始,本公众号每周给大家送福利,送什么呢?肯定是技术书啦,没那么多花里胡哨的,参与方式见文末. 好啦,进入我们的主题,今天我给 ...

  • 神奇的Python property装饰器:1行代码让Python方法秒变属性

    神奇的Python property装饰器:1行代码让Python方法秒变属性

  • 浅析Python装饰器

    浅析Python装饰器

  • 第20天:Python 之装饰器

    第20天:Python 之装饰器