babel-cli

babel-cli是本地使用编译js文件

1.安装:

cnpm i babel-cli babel-preset-env -D

2.配置packjson:

"scripts": {
"build": "babel src -d dist"//babel 编译对象 -d 编译后存放地
}

3.配置.babelrc文件:

{
"preset": ["env"]
}

配合webpack

1.安装:

npm i babel-loader babel-core babel-preset-latest -D

2.配置webpack.config.js

module.exports = {
entrys: {
app: './src/main.js'
},
output:{
path: './dist',
name: 'js/[name]-bundle.js'
},
modules:{
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
query:{presets:['env']}
}
]
}
}

babel基本用法的更多相关文章

  1. Babel 配置用法解析

    Babel 配置用法解析 刚复工的时候我司业务太多了,我已不记得我们连续作战了多少天,最近算是有时间可以学习学习我的babel大宝贝了,上周末看了下babel的一些核心模块以及babel的一些配置,今 ...

  2. WebStorm ES6 语法支持设置&babel使用及自动编译

    一.语法支持设置 Preferences > Languages & Frameworks > JavaScript 二.Babel安装 1.全局安装 npm install -g ...

  3. Babel编译

    Babel的目的就是让你可以使用最新的标准来开发,然后把兼容的问题交给它来完成.比如我如何在使用ES6的语法写完之后将其转换为ES5满足通用性呢? 先用这个最常用的Babel的用法来引入吧. 一  首 ...

  4. vue开发环境搭建win10

    需要安装nodejs, webpack@2.2.1, babel-cli,  vue-cli 1 安装nodejs 现在版本默认会安装nodejs 和 npm包 和 配置环境 2 检查是否安装成功,在 ...

  5. polyfll方案优化

    polyfill 在es6风靡的时候,babel给了我们一个有力的转换方案,可以在低版本浏览器上写一些新语法而不用考虑兼容问题 polyfill的诞生 语法和API区分 语法是用来产生特殊效果的一些符 ...

  6. babel 用法及其 .babelrc 的配置详解,想做前端架构,拒绝一知半解...

    Babel 官方介绍:将 ECMAScript 2015 及其版本以后的 javascript 代码转为旧版本浏览器或者是环境中向后兼容版本的  javascript 代码. 简而言之,就是把不兼容的 ...

  7. 1. 现代 javascript 用法 简介 及 babel

    简介 包含 ECMAScript 基本概念,babel 使用 ,eslint 使用 以及新语法的介绍 和使用经验 ECMAScript 概念 ECMASctipt 是一种由 Ecma (前身为欧洲计算 ...

  8. webpack解惑:require的五种用法

    我之前在 <前端搭环境之从入门到放弃>这篇文章中吐槽过,webpack中可以写commonjs格式的require同步语法,可以写AMD格式的require回调语法,还有一个require ...

  9. webpack解惑:require的五种用法 (转)

    我之前在 <前端搭环境之从入门到放弃>这篇文章中吐槽过,webpack中可以写commonjs格式的require同步语法,可以写AMD格式的require回调语法,还有一个require ...

随机推荐

  1. Python魔法方法(转发整合)

    如果你的对象实现(重载)了这些方法中的某一个,那么这个方法就会在特殊的情况下被 Python 所调用,你可以定义自己想要的行为,而这一切都是自动发生的. __new__: 是一个对象实例化时调用的第一 ...

  2. 解决Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.1:compile (default-compile) on project autotest_fchtgl: Compilation failure的方法

    在碰到maven install 发现报错 Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.2:comp ...

  3. Gradle下载 Jar 包

    使用此方法下载Jar包的前提是已经配置好了Gradle的环境了,配置好的标志是在终端输入gradle不提示command not found. 1. 编写build.gradle文件代码: apply ...

  4. Springboot项目如何把项目运行在服务器上

    作为一个开发者,不可避免的要把本地项目变成可以接入外网的上线项目,今天来记录下springboot框架下如果把项目打包放在服务器上运行 第一步,首先要买个服务器,这个一般甲方会提供 第二步,导入jar ...

  5. Javascript 基础知识2017-03-17

    JavaScript语法 1.单行注释:// 多行注释:*/ 2.基本数据类型:            int 整数型   (不等于四舍五入,把小数舍去)            string 字符型  ...

  6. Angular组件——父子组件通讯

    Angular组件间通讯 组件树,1号是根组件AppComponent. 组件之间松耦合,组件之间知道的越少越好. 组件4里面点击按钮,触发组件5的初始化逻辑. 传统做法:在按钮4的点击事件里调用组件 ...

  7. Java后台模拟发送http的get和post请求,并测试

    个人学习使用:谨慎参考 1 Client类 import com.thoughtworks.gauge.Step; import com.thoughtworks.gauge.Table; impor ...

  8. Vue解析四之注册变量

    判断监听的变量,如果undefined可以用$set来注册一个变量. 另外click可以是表达式,不一定必须是一个方法.

  9. PAT-L2-007-gplt真题

    题目分析: 1. 首先,题目说一个家庭有孩子爸爸妈妈等几辈人,可以利用并查集将一个家庭里的所有人变成一个集合: 2. 刚好题目的目的也是这样,输出的是一个家庭人数,人均房产面积,人均房产套数等: 3. ...

  10. 【Python】 linux中python命令的命令行参数

    Python命令行参数 原文地址:http://blog.163.com/weak_time/blog/static/25852809120169333247925/ Python的命令行参数,提供了 ...