如何将es5的代码转换为es6

如何将es5的代码转换为es6

在这里需要的环境就是node，可以去查一下安装教程，这里就不赘述了。当然需要我们的主角--webpack，很强大的一个工具。
安装webpack：（cmd命令窗口，也可以用git）
a.安装webpack到全局 npm install webpack -g  
b.然后安装webpack到你的项目中（要切盘到你的目录下）  npm install webpack --save-dev
c.webpack中常用命令webpack --watch 只要改变了jsx内容，直接将改变的内容重新编译打包,运行久了以后会自动终止
安装完成后需要下面的插件（切盘到你的项目下）：
1.npm install babel-core --save-dev
2.npm install babel-loader  --save-dev 下载加载器
3.npm install babel-preset-es2015 --save-dev
逐步下载上述插件，完成之后创建一个webpack.config.js文件放在你的项目目录下，在里面写配置文件，代码如下：
module.exports={
//文件入口
entry: {
main: './es6/main.js',
common: './es6/common.js'
},
//文件出口
output:{
path:'./js',
filename:'[name].bundle.js'
},
//引入模块。babel-loader转换
module:{
loaders:[
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query:
{
presets: ['es2015'], //并不明白，这么写就对了，如果用react，就在这里写上['react']
//npm install babel-plugin-transform-runtime 然后引入 解决es6生成器函数带来的问题
}
}
]
}
}
ok，完成。

一、怎样可以很好地保证网页的浏览器兼容性： 尽量使用标准的网页布局方式，也就是符合w3c的布局，再加上css的使用也符合w3c的使用，推荐firefox,chrome，这样基本上，firefox,chrome,safari,opera,ie9都能表现一致，然后再针对ie8、7、6进行修改，这样完成一个页面下来，其实很少有地方需要你针对特定的浏览器进行兼容性修正。 二、怎么去解决浏览器的兼容西问题： 在开发web app的时候，开发机上面最好把主流浏览器都装上，比如说：chrome、ff、safari、ie、ie tester... 在大多数情况下，ff和chrome差别不是很大。 2.开发过程中要注意，每做好一个样式，都要跑一遍所有要兼容的浏览器，这样虽然开发过程时间会比较长，可是会比你开发完成后再来改效率高得多，我曾经就碰到过一个产品，开发完成后由于兼容性问题导致其发展面很窄，最后不得不重新开发。 3.如果真的碰到样式不兼容的情况，那么只能针对不同的浏览器做相应的调整。 4.一些新的特效可能在一些版本落后的浏览器里不兼容，这个时候我们的原则就是：不求效果绚丽，只求工整规范 。 5.多积累，多看看符合w3c标准规范的css手册和js手册，注意积累，或者用一些开源框架，那样兼容性可以省下不少时间。 三、跨浏览器开发应该使用的一些经验： 1)一些关于跨浏览器/设备的工具 1. modernizr.js 特性检测器，有就使用原生，没有就加载polyfill 2. polyfill/shim 向后兼容的浏览器的js补丁，一般和modernizr一起用 3. jshint.js js语法检测器 4. boilerplate 开发的最佳实践的初始模板 5. 阅读第三方库关于最低版本支持 6. 使用js单元测试，测试目标浏览器 7. responsive design （针对屏幕大小） 8. normalize.css 统一浏览器基本元素的风格 2) 一个策略： 把浏览器分两类：一类是历史遗留浏览器，一类是现代浏览器，然后根据这个分类开发两个版本的网站，然后自己定义那些浏览器是历史遗留版本，凡是历史遗留版本浏览器，统统使用历史遗留版界面，然后通过通告栏（信息通知系统）明确告知本版本有些功能不能使用，尽快转移到现代浏览器上。然后现代浏览器的网站版本，功能全开，提供最好的用户体验。 3)最后手段： 直接使用jreject.js这类插件，弹出有全黑蒙板的对话框，告诉用户这个网站什么版本的ie/浏览器不能用，请使用至少什么版本的ie，firefox和chrome.(这个是最后手段，以上方案都失效的情况下使用。) 4)一个提醒： 跨浏览器兼容问题，过去有，现在有，以后会更麻烦，所以这个问题在你的项目开始前，就必须确定下来最低支持的版本是什么，然后设计一个对应兼容方案。 不要等开发完毕了，才告知要必须兼容个ie6啥的，那你的项目就有得好改了。 5)面向未来： 2015年es6就要正式完成了，等es6出来后，如何把es6的javascript向后兼容呢？这里我有个概念，还没实验过： 1.使用es6编译器把代码导出成es5代码 2.使用modernzr检查浏览器是否支持es6，支持用es6代码；不支持，用编译好的es5代码并且加载es6shim。 3.使用grunt把es6编译过程完全自动化