babel环境安装与编译
babel:将浏览器不支持的ES6语法转为javascript
查看node是否安装:
npm -v
node -v
实例演示:
在桌面新建part5目录
在cmd命令行中
cd desktop
cd part5
安装babel:
初始化package.json文件:描述当前项目信息,包括依赖等
npm init
安装babel cli
npm install --save-dev babel-cli
在package.json的"script"下添加一句:
"build": "babel entry.js"
创建entry.js文件,写es6代码用于测试
执行
npm run build
全局安装babel-cli
npm i babel-cli -g
安装babel-preset-env
npm i -D babel-preset-env
创建配置文件,告诉babel用什么规则来编译文件.babelrc
{
"presets": [
[
"env",
{
"targets":{
"browsers":["last 1 version"]
}
}
]
]
}
修改packsge.json
-o 输出到文件
-w 始终处于监听状态
"build": "babel entry.js -o index.js -w"
通过babel插件体验新特性
安装插件
npm i -D babel-plugin-transform-class-properties
修改.babelrc文件
{
"presets": [
[
"env",
{
"targets":{
"browsers":["last 1 version"]
}
}
]
],
"plugins":["transform-class-properties"]
}
babel环境安装与编译的更多相关文章
- 安装maven编译环境
安装maven编译环境 1.默认已经装好yum并配置好yum源(推荐使用163yum源) 2.安装JDK 3.安装相关依赖环境(root用户登陆) yum install -y cmake lzo-d ...
- CentOS离线安装GCC编译环境
gcc编译环境rpm下载 安装相关的rpm包,具体版本可能随时间变化而变化,可以去以下地址下载: 重庆大学镜像:http://b.mirrors.lanunion.org/CentOS/中国科学技术大 ...
- centos6.5环境源码编译安装mysql5.6.34
centos6.5环境源码编译安装mysql5.6.34 源码下载地址http://dev.mysql.com/downloads/mysql/5.6.html#downloads 选择Generic ...
- WebStorm 8.0安装LESS编译环境的教程
WebStorm是一个非常棒的Web前端开发编辑器,被程序猿们成为“最智能的JavaScript IDE”.对HTML5.Bootstrap框架.Node.js等都有完美支持.目前最新版本为WebSt ...
- 【转】Android 4.3源码的下载和编译环境的安装及编译
原文网址:http://jingyan.baidu.com/article/c85b7a641200e0003bac95a3.html 告诉windows用户一个不好的消息,windows环境下没法 ...
- Linux Object-C 编译环境安装
sudo apt-get install gnustep sudo apt-get install gnustep-devel sudo apt-get install gobjc . /usr/sh ...
- Linux本地yum源配置以及使用yum源安装gcc编译环境
本文档是图文安装本地yum源的教程,以安装gcc编译环境为例. 适用范围:所有的cetos,红帽,fedroa版本 适用人群:有一点linux基础的小白 范例系统版本:CentOS Linux rel ...
- Tesseract环境搭建及编译安装
Tesseract环境搭建及编译安装 Tesseract源码都是C++源码:对于不咋会C++的人来说,这真是...虽然说语言有相通性,但是...哎!!!!! 分享出来,也希望对大家有所帮助. 环境:w ...
- android编译环境安装
Android 编译环境安装 安装 Java 6 安装 Java 6 安装依赖包 (Ubuntu 12.04) $ sudo apt-get install git gnupg flex bison ...
随机推荐
- Codeforces_845
A.排序,比较中间两个大小. #include<bits/stdc++.h> using namespace std; ]; int main() { ios::sync_with_std ...
- tar命令详解及使用实例
tar命令 [root@linux ~]# tar [-cxtzjvfpPN] 文件与目录 …. 参数: -c :创建压缩文件 -x :解开压缩文件 -t :查看tar包里面的文件! 上面3个参数只能 ...
- 在IDEA中如何使用lombok插件
lombok 插件 lombok是一款可以精减java代码.提升开发人员生产效率的辅助工具,利用注解在编译期自动生成 setter/getter/toString()/constructor之类的代码 ...
- python os和sys模块使用
python os和sys模块使用 os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname") 改变当前脚本工作目录:相 ...
- telnet命令连接服务器端
win7: (1).使用telnet命令: 控制面板--->程序--->打开或关闭Windows功能--->Telnet客户端[勾选] (2)连接(cmd) eg:telnet ww ...
- npm安装Vue.js
我之前是有安装过npm的 使用淘宝 NPM 镜像 $ npm install -g cnpm --registry=https://registry.npm.taobao.org 查看nmp版本 $ ...
- 00.ES6简介
ES6 简介 ECMAScript 和 JavaScript 的关系 JavaScript是由ECMAScript组织维护的,ES6的名字就取自ECMAScript中的E和S,6的意思是已经发布到第6 ...
- 从零开始一个个人博客 by asp.net core and angular(三)
这是第三篇了,第一篇只是介绍,第二篇介绍了api项目的运行和启动,如果api项目没什么问题了,调试都正常了,那基本上就没什么事了,由于这一篇是讲前端项目的,所以需要运行angular项目了,由于前端项 ...
- 定时器_在.net core3.0 webapi中添加自定义定时器功能
前言:想在.net framework环境使用自定义定时器的话,参考我的另一篇文章:https://www.cnblogs.com/lxhbky/p/10242839.html 想在.net core ...
- 教你如何理解JAVA的I/O类库
花括号MC(huakuohao-mc):关注JAVA基础编程及大数据,注重经验分享及个人成长. Java 的 I/O 流,说简单也简单,说复杂也复杂.复杂是因为进行一次常规的文件 I/O 操作通常要用 ...