将js编译成es5

① es5一个js文件导出多个模块怎么写

es6

• import ... form...替代 require()

  //不接收对象 require:require('s.css'); //(es5)improt 's.css' //(es6)//接收对象var o = require('s.js'); //es(5)import o form s.js //(es6)
  

• 对象的写法

  导出一个模块对象（es5）:
  mole.exports={
  add:add, sub:sub}
  导出一个模块对象（es6）:mole.exports={
  add, sub}
  注意：这种写法属性名和属性值变量是同一个，否则要分开写mole.exprots={
  addFn:add, sub}
  

• 一个对象中方法的写法

  //es5mole.exports={
  addFun:function(x,y){ return x+y;
  }
  }//es6mole.exports={
  addFun(x,y){ return x+y;
  }
  }
  

• 导出对象的写法

  calc.js中有两个函数：
  function add(){}
  function sub(){}
  //写法一
  es5写法:
  mole.exports.add = add;
  mole.exports.sub = sub;
  使用：
  var calc = require('./calc.js');
  es6写法:
  exprot function add(){}
  exprot function sub(){}
  
  //写法二
  es5:
  mole.exports = {add:add,sub:sub};
  es6:
  exprot default{
  add,sub}
  //表示取得calc.js中所有暴露出来的对象(es6)import calc from './calc.js'
  
  //只获取到calc.js中的add方法(按需获取)import {add} from './calc.js'
  

  用export 和import 的写法注意点

  1、如果模块中是使用 export default {} 方式导出的对象
  只能通过 import 对象名称 from '模块路径'
  不能通过 import {对象名称} from '模块路径'2、如果就想要import {对象名称} from '模块路径'通过这种方式来按需导入对象中的某个属性
  那么应该使用 export 跟着要导出的对象或者方法名称 export function add(){} export function substrct(){}
  
  那么就可以使用： import {add,substrct} from '模块路径'
  只需要直接使用 add()方法即可
  注意这里不能直接使用： import cacl from '模块路径' 这种方式导入，会报错
  

② webpack babel 怎么将Object.assign() 转成es5语法

习惯了WebStorm的话..我就假设题主会用Node.js和npm啦～

一句话总结：用WebStorm自带的File Watcher功能+Babel实现自动转换ECMAScript 6代码为ES5代码

我是这么配置的..就先新建一个Empty Project，然后在src目录下新建了一个main.js；
// 这一步不是必须的 只是刚上手的话 从空项目开始自己配置会少很多干扰

Then..进入设置，把javaScript language version改成ECMAScript 6；

再Then..写一段ES6代码

'use strict';
// node直接运行ES6代码时，如使用了ES6的一些关键字，比如let，就需要严格模式，否则会报错
// 这是没有严格模式时候的错误提示
// SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

function* fibs() {// Generator Function
let a = 0;
let b = 1;
while (true) {
yield a;
// [a, b] = [b, a + b];
b = a + b;
a = b - a;
}
}
let [first, second, third, fourth, fifth, sixth] = fibs();
console.log(first, second, third, fourth, fifth, sixth);

现在IDE会出现一个File watcher提示条

先别点Add watcher！我们要先去装babel～

首先在根目录新建一个package.json
{
"name": "test-project",
"version": "1.0.0"
}

然后打开IDE的Terminal，安装babel-cli
npm install --save-dev babel-cli

Good! 现在可以去点Add watcher啦，点完之后会弹出一个框，其中大部分设置IDE都帮你搞定了

下面第三行，Program那一项，填

$ProjectFileDir$/node_moles/.bin/babel

然后点OK，这个时候你就会发现左边多出来一个main-compiled.js文件啦

但是还没搞定！现在只是搞定了自动转换的功能，系统默认把ES6 compile成了ES6..（你应该会发现compile出来的东西跟原来的一样..Generator函数并没有被转换成ES5的格式）

所以我们需要安装Babel的preset以正确识别ES6代码；

和刚才一样，在npm安装babel的ES6的preset
npm install --save-dev babel-preset-es2015

在根目录下新建一个.babelrc文件（就是babel在当前项目的配置文件），写上
{
"presets": [
"es2015"
]
}

OK搞定！保存再回去看一下main-compiled.js 应该就变成这个样子啦，现在你在main.js里直接写ES6代码，IDE都会自动compile成ES5的代码在这里啦～

注意：想直接用Node.js运行ES6代码还是有些问题..因为这段代码用的ES6的解构赋值Node.js还未完全支持，需要在运行的时候加入一些tags（以开启Node.js的相关试验特性），具体可以参考Node.js官网对ES6的说明：ECMAScript 2015 (ES6)。

③ es6转成es5 支持set吗

如果你说的是数据结构的 Set，是可以支持的，babeljs 相关的文档看这里：
http://babeljs.io/docs/learn-es2015/#map-set-weak-map-weak-set

如果你说的是 getter 和 setter， 没有很好的办法通过 polyfill 去支持，所以即使你用 babeljs 之类的将 es6 转成 es5，如果浏览器没有办法原生支持，就还是不支持。

不过目前的主流浏览器已经基本都支持了，Chrome/Safari/Firefox/Edge 以及 IE9+ 都支持。IE8 仅支持 DOM 对象的getter 和 setter。

④ VS开发NodeJs,特定语法无法通过编译

这是es6的语法，用先用es6编译器编译成es5的语法浏览器才能支持，可以用webpack之类的工具去编译

⑤ 为什么我使用gulp-babel不能将es6编译成es5

需要安装babel-preset-es2015插件，才能把es6编译成es5
npm install --save-dev babel-preset-es2015

在gulpfile.js中增加presets
var gulp = require("gulp");
var babel = require("gulp-babel");

gulp.task("default", function () {
return gulp.src("src/app.js")
.pipe(babel({
presets: ['es2015']
}))
.pipe(gulp.dest("dist"));
});

⑥ 什么是es5 javascript

ES5 即ECMAScript5 ，是javascript的语言的标准的一版。
相当于C++98，C++11这类的标准，定义了javascript语言本身的一些规则和函数……
既然她是标准中的一版，那么说明还有其他的标准，推荐看一篇文章
ES5, ES6, ES2016, ES.Next: JavaScript 的版本是怎么回事？“译”
http://huangxuan.me/2015/09/22/js-version/

⑦ “es5 javascript”是什么

ECMAScript 5.1 (或仅 ES5) 是ECMAScript(基于JavaScript的规范)标准最新修正。 与HTML5规范进程本质类似，ES5通过对现有JavaScript方法添加语句和原生ECMAScript对象做合并实现标准化。ES5还引入了一个语法的严格变种，被称为”严格模式(strict mode)”。

⑧ 如何让浏览器支持ES6中的import和export语法

具体的安装步骤网上可以搜到很多, 这里不再赘述. 安装完毕后打开node.js自带的命令行工具
这里写图片描述
然后输入如下命令全局安装webpack工具
npm install -g webpack
接着通过命令行工具定位到你的工程文件的根目录下, 再次安装webpack到你的工程中
npm install webpack
2. 编写webpack.config.js文件
在根目录下创建webpack.config.js, 这个文件是用来描述一些要使用webpack工具进行打包的配置信息, 文件内容如下:
这里写图片描述
通过该文件可以使用webpack打包工具, webpack会从import.js进入, 对该文件中的内容进行编译并打包, 最终会在dist目录下生成打包好的文件bundle.js, 编译打包过程中用到的工具在mole对象的loaders中声明, 这里使用了babel-loader来对JS文件进行编译(包括从ES6转换为ES5以及打包)
3. 创建import.js
创建一个import.js, 内容如下:
这里写图片描述
在该文件中通过ES6语法import从export.js中引入firstName和lastName变量. 并且通过console.log将引入的两个变量打印到控制台.
4. 创建export.js
这里写图片描述
在该文件中通过ES6语法export将文件中的几个变量作为模块输出给别的文件引用.
5. 创建HTML文件
在HTML文件中直接将webpack最终打包生成的bundle.js文件引入即可, 因为通过webpack工具已经将export.js和import.js的所有内容都打包到一个文件bundle.js中了, 因此在HTML文件中引入该文件即可以将两个JS文件中的代码都执行.
这里写图片描述
6. 配置.babelrc文件
在工程文件的根目录下创建一个.babelrc文件(注意前面有个点), 这个文件是用来描述我要根据什么样的规则、或者是将JS文件编译成什么版本的文件(比如说ES5). 该文件的内容如下:
这里写图片描述
7. 下载相关依赖模块
方式1: 可以像下面这样, 直接在项目根目录下创建一个package.json文件, 并且在文件中指定devDependencies对象, 在该对象中写上我编译及打包中所要使用到的依赖模块, 图片中的webpack就是用于打包的工具, 而其他的以babel开头的选项都是编译JS文件并打包所需要用到的依赖模块.
这里写图片描述
创建好package.json文件后, 在命令行中输入
npm install
npm工具就会根据该文件中devDependencies选项下载对应的依赖模块.
方式2(推荐): Ctrl+R打开运行, 然后输入cmd打开命令行工具, 通过命令行工具一个个安装, 这样可以直接通过npm去下载依赖模块最新的稳定的版本, 同时也不需要自己去记这些模块的版本号
npm install babelnpm install babel-clinpm install babel-corenpm install babel-loadernpm install babel-preset-es2015
8. 使用 webpack打包
使用命令行工具定位到项目的根目录下, 然后输入如下指令
webpack
等待一会儿就会发现工程文件的目录下多了一个dist文件夹, 里面放着的就是打包好了的bundle.js文件, 在HTML文件中通过下面的代码引入js文件
<script src="dist/bundle.js"></script>
然后在浏览器上运行html文件, 使用F12打开开发者工具, 就可以看到console选项中输出两行记录”Micheal”, “Jackson”

⑨ angular.js2能不能像es6转换成es5那样转换成angular.js1

不能，ng2和ng1已经是完全不同的两个框架了
ng2到ng6是属于同一个框架的不同版本（虽然这个跨度之间也有非常巨大的改变了）

⑩ gulp babel安装成功了为什么不能将es6编译成es5

按babel官方教程来配置的：

gulpfile.js

var gulp = require("gulp");var babel = require("gulp-babel");

gulp.task("default", function () { return gulp.src("src/app.js")
.pipe(babel())
.pipe(gulp.dest("dist"));
});

app.js

'use strict';let a = 'hello world';

还需要安装babel-preset-es2015插件，才能把es6编译成es5

npm install --save-devbabel-preset-es2015

在gulpfile.js中增加presets

var gulp = require("gulp");var babel = require("gulp-babel");

gulp.task("default", function () { return gulp.src("src/app.js")
.pipe(babel({ presets: ['es2015']
}))
.pipe(gulp.dest("dist"));
});