❶ 白鷺發布ES6時uglify-js不支持es6的解決方案
試了一下發布ES6，結果報錯，不支持uglify-js，需要換插件。從論壇中找到如下鏈接：
https://bbs.egret.com/forum.php? ... 52516&highlight=es6
但是看了一下發現並不是很合適，因為Egret中有不少地方用到了uglify-js，換起來有點麻煩。
這里我直接使用uglify-js的harmony分支uglify-es，源在github上：
https://github.com/mishoo/UglifyJS2/tree/harmony
按以下步驟操作：
1.按上面鏈接的文檔進行安裝，我直接npm安裝的，沒有替換Egret集成的uglify-js
2.安裝完後找到Egret庫中的utils.js，我的悄晌Mac目錄在：/Users/xxxxxx/Library/Application Support/Egret/engine/5.2.14/tools/lib/utils.js
3.打開utils.js進行修改：
找到：
修改為：
完成第一步，此處使用剛安裝好的庫
然後找到：
修改為：
此處是為了處理egret publish的時候會引起的編譯錯誤。
4.執行egret publis，可以正常發布。
目前我這么處理還沒問題，不知道是否有隱藏問題，感謝指正。
ES6越來越廣泛，期待Egret官方能夠把常用集成庫都處理成支持ES6的版本。
5.備註：
uglify在對第三方庫生成.min.js時，如果想集成到Egret中，不要加參數，直接輸出即可。示例如下：
1.錯誤寫法，能正常debug能正常release但不能正常運行：
2.正確寫法，全部散激正常：
** 補充：如果編譯目標可為es5，忽略以上全部說明，直接在沖運襪lib中添加es6配置即可，如下
❷ React | 使用webpack構建React項目
配置 React 項目，需要完成的工作：
1、編譯 jsx,es6,scss 等資源
2、褲閉自動引入靜態資源到 html 頁面
3、實時編譯和刷新瀏覽器
4、按指定模塊化規范自動包裝模塊
5、自動給 css 添加瀏覽器內核前綴
6、按需打包合並 js、css
根據 webpack 文檔編寫最基本的 webpack 配置，直接使用 node api 的方式
/* webpack.config.js */
var webpack= require( 'webpack' );
// 輔助函數 var utils= require( './utils' );
var fullPath=utils.fullPath;
var pickFiles=utils.pickFiles;
// 項磨大目根路徑 var ROOT_PATH=fullPath( '../' );
// 項目源碼路徑胡游裂 var SRC_PATH=ROOT_PATH+ '/src' ;
// 產出路徑 var DIST_PATH=ROOT_PATH+ '/dist' ;
// 是否是開發環境 var __DEV__= process.env. NODE_ENV !== 'proction' ;
// conf
var alias=pickFiles({
id :/(conf\/[^\/]+).js$/,
pattern :SRC_PATH+ '/conf/*.js'
});
// components
alias= Object.assign(alias,pickFiles({
id :/(components\/[^\/]+)/,
pattern :SRC_PATH+ '/components/*/index.js'
}));
// recers
alias= Object.assign(alias,pickFiles({
id :/(recers\/[^\/]+).js/,
pattern :SRC_PATH+ '/js/recers/*'
}));
// actions
alias= Object.assign(alias,pickFiles({
id :/(actions\/[^\/]+).js/,
pattern :SRC_PATH+ '/js/actions/*'
}));
var config= {
context :SRC_PATH,
entry : {
app : [ './pages/app.js' ]
},
output : {
path :DIST_PATH,
filename : 'js/bundle.js'
},
mole : {},
resolve : {
alias :alias
},
plugins : [
new webpack.DefinePlugin({
// http://stackoverflow.com/questions/30030031/passing-environment-dependent-variables-in-webpack
"process.env.NODE_ENV" : JSON .stringify(process.env. NODE_ENV || 'development' )
})
]
};
mole.
exports =config;
/* webpack.dev.js */
var webpack= require( 'webpack' );
var WebpackDevServer= require( 'webpack-dev-server' );
var config= require( './webpack.config' );
var utils= require( './utils' );
var PORT=8080;
var HOST=utils.getIP();
var args= process.argv;
var hot=args.indexOf( '--hot' ) > -1;
var deploy=args.indexOf( '--deploy' ) > -1;
// 本地環境靜態資源路徑 var localPublicPath= 'http://' +HOST+ ':' +PORT+ '/' ;
config.output. publicPath =localPublicPath;
config.entry.app.unshift( 'webpack-dev-server/client?' +localPublicPath);
new WebpackDevServer(webpack(config), {
hot :hot,
inline : true ,
compress : true ,
stats : {
chunks : false ,
children : false ,
colors : true
},
// Set this as true if you want to access dev server from arbitrary url.
// This is handy if you are using a html5 router.
historyApiFallback : true ,
}).listen(
PORT,HOST, function () {
console .log(localPublicPath);
});
編譯 jsx、es6、scss 等資源：
● 使用 bael 和 babel-loader 編譯 jsx、es6
● 安裝插件: babel-preset-es2015 用於解析 es6
● 安裝插件：babel-preset-react 用於解析 jsx
// 首先需要安裝 babel
$ npm i babel-core
// 安裝插件
$ npm i babel-preset-es2015babel-preset-react
// 安裝 loader
$ npm i babel-loader
在項目根目錄創建 .babelrc 文件:
{
"presets" : [ "es2015" , "react" ]
}
在 webpack.config.js 里添加：
// 使用緩存 var CACHE_PATH = ROOT_PATH + '/cache' ;
// loaders
config.mole. loaders = [];
// 使用 babel 編譯 jsx 、 es6
config.mole. loaders .push({
test :/\.js$/,
exclude :/node_moles/,
include : SRC_PATH,
// 這里使用 loaders ，因為後面還需要添加 loader
loaders : [ 'babel?cacheDirectory=' + CACHE_PATH ]
});
接下來使用 sass-loader 編譯 sass:
$ npm i sass-loader node-sasscss-loader style-loader
●css-loader 用於將 css 當做模塊一樣來 import
●style-loader 用於自動將 css 添加到頁面
在 webpack.config.js 里添加：
// 編譯 sass
config.mole. loaders .push({
test :/\.(scss|css)$/,
loaders : [ 'style' , 'css' , 'sass' ]
});
自動引入靜態資源到相應 html 頁面
● 使用 html-webpack-plugin
$ npm i html-webpack-plugin
在 webpack.config.js 里添加：
// html 頁面 var HtmlwebpackPlugin= require( 'html-webpack-plugin' );
config.
plugins .push(
new HtmlwebpackPlugin({
filename : 'index.html' ,
chunks : [ 'app' ],
template : SRC_PATH + '/pages/app.html'
})
);
打包合並 js、css
webpack 默認將所有模塊都打包成一個 bundle，並提供了 Code Splitting 功能便於我們按需拆分。在這個例子里我們把框架和庫都拆分出來：
在 webpack.config.js 添加：
config.entry. lib = [
'react' , 'react-dom' , 'react-router' ,
'rex' , 'react-rex' , 'rex-thunk'
]
config.output. filename = 'js/[name].js' ;
config.
plugins .push(
new webpack.optimize.CommonsChunkPlugin( 'lib' , 'js/lib.js' )
);
// 別忘了將 lib 添加到 html 頁面
// chunks: ['app', 'lib']
❸ 怎麼快速上手JavaScript中的ES6，ES6中的解構，運算符，類，繼承模塊化 有什麼簡單的理解
模塊化在項目中十分的重要，一個復雜的項目肯定有很多相似的功能模塊，如果每次都需要重新編寫模塊肯定既費時又耗力。但是引用別人編寫模塊的前提是要有統一的「打開姿勢」，如果每個人有各自的寫法，那麼肯定會亂套，下面介紹幾種JS的模塊化的規范。
一:模塊化進程一：script標簽
這是最原始的 JavaScript 文件載入方式，如果把每一個文件看做是一個模塊，那麼他們的介面通常是暴露在全局作用域下，也就是定義在 window 對象中，不同模塊的介面調用都是一個作用域中，一些復雜的框架，會使用命名空間的概念來組織這些模塊的介面。
缺點:
1、污染全局作用域
2、開發人員必須主觀解決模塊和代碼庫的依賴關系
3、文件只能按照script標簽的書寫順序進行載入
4、在大型項目中各種資源難以管理，長期積累的問題導致代碼庫混亂不堪
二:模塊化進程二：CommonJS規范
該規范的核心思想是允許模塊通過require方法來同步載入所要依賴的其他模塊，然後通過 exports 或 mole.exports 來導出需要暴露的介面。
require("mole");
require("../file.js");
exports.doStuff = function(){};
mole.exports = someValue;
優點：
1、簡單並容易使用
2、伺服器端模塊便於重用
缺點:
1、同步的模塊載入方式不適合在瀏覽器環境中，同步意味著阻塞載入，瀏覽器資源是非同步載入的
2、不能非阻塞的並行載入多個模塊
mole.exports與exports的區別
1、exports 是指向的 mole.exports 的引用
2、mole.exports 初始值為一個空對象 {}，所以 exports 初始值也是 {}
3、require() 返回的是 mole.exports 而不是 exports
exports示例：
// app.js
var circle = require('./circle');
console.log(circle.area(4));
// circle.js
exports.area = function(r){
return r * r * Math.PI;
}
mole.exports示例：
// app.js
var area = require('./area');
console.log(area(4));
// area.js
mole.exports = function(r){
return r * r * Math.PI;
}
錯誤的情況：
// app.js
var area = require('./area');
console.log(area(4));
// area.js
exports = function(r){
return r * r * Math.PI;
}
其實是對 exports 進行了覆蓋，也就是說 exports 指向了一塊新的內存（內容為一個計算圓面積的函數），也就是說 exports 和 mole.exports 不再指向同一塊內存，也就是說此時 exports 和 mole.exports 毫無聯系，也就是說 mole.exports 指向的那塊內存並沒有做任何改變，仍然為一個空對象{}，也就是說area.js導出了一個空對象，所以我們在 app.js 中調用 area(4) 會報 TypeError: object is not a function 的錯誤。
總結：當我們想讓模塊導出的是一個對象時， exports 和 mole.exports 均可使用（但 exports 也不能重新覆蓋為一個新的對象），而當我們想導出非對象介面時，就必須也只能覆蓋 mole.exports 。
三:模塊化進程三：AMD規范
由於瀏覽器端的模塊不能採用同步的方式載入，會影響後續模塊的載入執行，因此AMD(Asynchronous Mole Definition非同步模塊定義)規范誕生了。
AMD標准中定義了以下兩個API
1、require([mole], callback);
2、define(id, [depends], callback);
require介面用來載入一系列模塊，define介面用來定義並暴露一個模塊。
示例：
define("mole", ["dep1", "dep2"], function(d1, d2){
return someExportedValue;
});
require(["mole", "../file"], function(mole, file){ /* ... */ });
優點：
1、適合在瀏覽器環境中非同步載入模塊
2、可以並行載入多個模塊
缺點：
1、提高了開發成本，代碼的閱讀和書寫比較困難，模塊定義方式的語義不順暢
2、不符合通用的模塊化思維方式，是一種妥協的實現
四:模塊化進程四：CMD規范
CMD(Common Mole Definition)規范和AMD很相似，盡量保持簡單，並與CommonJS和Node.js的 Moles 規范保持了很大的兼容性。在CMD規范中，一個模塊就是一個文件。
示例：
define(function(require, exports, mole){
var $ = require('jquery');
var Spinning = require('./spinning');
exports.doSomething = ...
mole.exports = ...
})
優點：
1、依賴就近，延遲執行
2、可以很容易在 Node.js 中運行
缺點：
1、依賴 SPM 打包，模塊的載入邏輯偏重
AMD和CMD的區別
AMD和CMD起來很相似，但是還是有一些細微的差別，讓我們來看一下他們的區別在哪裡：
1、對於依賴的模塊，AMD是提前執行，CMD是延遲執行。
2、AMD推崇依賴前置；CMD推崇依賴就近，只有在用到某個模塊的時候再去require。看代碼：
// AMD
define(['./a', './b'], function(a, b){ // 依賴必須一開始就寫好
a.doSomething()
// 此處略去 100 行
b.doSomething()
...
});
// CMD
define(function(require, exports, mole){
var a = require('./a')
a.doSomething()
// 此處略去 100 行
var b = require('./b')
// 依賴可以就近書寫
b.doSomething()
// ...
});
3、AMD 的 API 默認是一個當多個用，CMD 的 API 嚴格區分，推崇職責單一。
五:模塊化進程五：ES6模塊化
EcmaScript6標准增加了JavaScript語言層面的模塊體系定義。ES6 模塊的設計思想，是盡量的靜態化，使得編譯時就能確定模塊的依賴關系，以及輸入和輸出的變數。CommonJS和AMD模塊，都只能在運行時確定這些東西。
在 ES6 中，我們使用export關鍵字來導出模塊，使用import關鍵字引用模塊。需要說明的是，ES6的這套標准和目前的標准沒有直接關系，目前也很少有JS引擎能直接支持。因此Babel的做法實際上是將不被支持的import翻譯成目前已被支持的require。
盡管目前使用import和require的區別不大(本質上是一回事)，但依然強烈推薦使用import關鍵字，因為一旦JS引擎能夠解析ES6的import關鍵字，整個實現方式就會和目前發生比較大的變化。如果目前就開始使用import關鍵字，將來代碼的改動會非常小。
示例：
import "jquery";
export functiondoStuff(){}
mole "localMole" {}
優點：
1、容易進行靜態分析
2、面向未來的 EcmaScript 標准
缺點：
1、原生瀏覽器端還沒有實現該標准
2、全新的命令字，新版的 Node.js才支持
❹ 為什麼我使用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"));
});
❺ 如何讓瀏覽器支持ES6中的import和export語法
然而, Babel默認只轉換新的JavaScript句法（syntax），而不轉換新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對象，以及一些定義在全局對象上的方法（比如Object.assign）都不會轉碼。而且像import和export這兩個命令現在在任何瀏覽器中都是不支持的, 同時babel也無法將其轉換為瀏覽器支持的ES5, 原因在於:
babel只是個翻譯，假設a.js 里 import 了 b.js, 對a.js進行轉碼，只是翻譯了a.js，並不會把b.js的內容給讀取合並進來, 如果想在最終的某一個js里，包含 a.js，b.js 的代碼，那就需要用到打包工具
所以我在這里講解一下如何使用webpack工具將帶有import和export語法的JS文件, 通過打包工具生成所有瀏覽器都支持的單個JS文件.
1. 下載node.js和webpack
Node.js是一個基於Chrome JavaScript運行時建立的平台， 用於方首凱便地搭建響應速度快、易於擴展的網路應用。可以說就是伺服器端的JS. webpack是一個打包工具, 而它是依賴於node.js運行的.
下載node.js可以通過官網: http://nodejs.cn/download/
具體的安裝步驟網上可以搜到很多, 這里不再贅述. 安裝完畢後打開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」
❻ 解決 Vue 瀏覽器兼容 edge safari ie 問題
最近做的一個Vue項目，遇到了在Edge瀏覽器，Safari（version: 9.xx）瀏覽器上打不開的問題。分別有以下報錯：
Safari Error:
Edge Error:
const 和 ...（spread operator）語法都是ES6語法，這說明在Edge和safari 9 瀏覽器下都不支持ES6語法。帶著這個判斷，我去查了一下es6的瀏覽器支禪蠢棗持情況，果不其然，safari10以下和Edge14以下 和 IE 都不支持es6語法，具體ES6瀏覽器支持情況請參考以下表格：
Browser Support for ES6 (ECMAScript 2015)
找到問題的原因在於瀏覽器不支持ES6語法，所檔帆以需要使用Babel去編譯。接下來是如何在前端項目賀拆中配置babel，使能夠將ES6編譯成ES5語法：
注意 ： 所有使用到了ES6語法的文件都需要配置在以上的 mole> rules> include 裡面。
重新運行項目，刷新瀏覽器發現頁面恢復正常。
這篇文章涉及到的前端技術包括： ES6的新特性 ， babel的配置 ，等等。感興趣的同學可以查看我的其他文章或者自行學習。
參考文獻： From ES5 to ESNext