將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"));
});