如何使用babel，把写好的es6代码，转化为es5，让ie8兼容。

szysky 发布于2019-08-22 17:25 / 1094人阅读

摘要：现在有很过编译的工具，比如是编译，，，。这篇文字很简单，就是让我们使用语法的代码，不仅仅可以让谷歌浏览器看，还可以使用以上的浏览器看，其实就是把我们的代码，把语法转化为语法。下面我们以使用为例。里面的内容是全局安装。

现在有很过编译的工具，比如是babel编译，webpack，grunt，gulp。
这篇文字很简单，就是让我们使用es6语法的代码，不仅仅可以让谷歌浏览器看，还可以使用ie8以上的浏览器看，其实就是把我们的代码，把es6语法转化为es5语法。
下面我们以使用babel为例。
1.我们新建一个文件夹，名字就叫babel好啦。
然后在这个文件夹里，进入cmd，使用npm init。创建一个package.json（配置信息）。一路回车即可。
package.json里面的内容是

{
  "name": "babel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

2.全局安装babel。

npm install --g babel-cli

3.创建一个src（叫啥都可以）文件夹。里面有个1.js。写点es66代码。

添加build命令行。

在scripts里面可以刚一些，我们自己写的命令行。这里我们添加一条命令。"build": "babel src -d lib"，意思就是当我们npm run build 即就是npm run babel src -d lib。babel src -d lib，就是babel（编译） src（送住文件夹的src里），-d（目标），lib（到文件夹的lib里）

"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "babel src -d lib"
  },

5.安装开发依赖
在package.json里添加

  "devDependencies": {
    "babel-cli": "^6.0.0"
  },

然后在npm i。
6.现在你可以在cmd里运行npm run build。可以看到。babel文件夹里自动生成了一个lib文件夹。里面也对应生成了一个1.js。这就是“babel src -d lib”。但是这个1.js和src里面的1.js一抹一样，没有进行编译，这是为啥？
7.在babel文件夹没新建.babelrc文件。里面的内容是：

{
    "presets": ["env"]
}
可以理解为presets环境变量的意思。env模式。

8.安装babel-preset-env到开发依赖。

  "devDependencies": {
    "babel-preset-env": "^1.7.0",
    "babel-cli": "^6.0.0"
  },

然后在npm i
9.然后在npm run build。就可以看到lib里面的文件被编译了。
当然了 src里面可以有多个js。那么lib也就是对应编译出多个js了。

海外云主机 GPU服务器 ie8兼容性如何写好python ie8不兼容js哪些 ie8中js不兼容

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95153.html

Vue+webpack+Element 兼容问题总结

摘要：项目中用到了和官方文档中给出明确范围不支持及以下版本，因为使用了无法模拟的特性。但它支持所有兼容的浏览器。词法分析阶段把字符串形式的代码转换为令牌流。语法分析阶段会把一个令牌流转换成的形式方便后续操作。利用我们配置好的把生成的转变为新的。项目中用到了Vue.js和Elenment-UIVue官方文档中给出明确范围：Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法...

fxp 2019-08-26 12:10 评论0 收藏0
Vue+webpack+Element 兼容问题总结

摘要：项目中用到了和官方文档中给出明确范围不支持及以下版本，因为使用了无法模拟的特性。但它支持所有兼容的浏览器。词法分析阶段把字符串形式的代码转换为令牌流。语法分析阶段会把一个令牌流转换成的形式方便后续操作。利用我们配置好的把生成的转变为新的。项目中用到了Vue.js和Elenment-UIVue官方文档中给出明确范围：Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法...

sumory 2019-08-02 11:14 评论0 收藏0
ES6 + Webpack + React + Babel 如何在低版本浏览器上愉快的玩耍（上）

摘要：起因某天，某测试说这个页面在下白屏，也白。。某前端开发吭哧吭哧。。。一上午的时间就过去了，搞定了。第二天，某测试说又白了。。某前端开发吭哧吭哧。。。谁用的，出来我保证削不屎你。原谅我不禁又黑了一把。起因某天，某测试说：这个页面在 IE8 下白屏，9也白。。某前端开发: 吭哧吭哧。。。一上午的时间就过去了，搞定了。第二天，某测试说：IE 又白了。。某前端开发: 吭哧吭哧。。。谁...

you_De 2019-08-20 11:06 评论0 收藏0
煦涵说Webpack-IE低版本兼容指南

摘要：，是一个前端资源加载打包工具，现在版本已经到，今天的文章不支持介绍的及使用，而是对最近项目开发中使用打包时处理低版本及以下浏览器兼容问题做一次总结。 Webpack，Webpack 是一个前端资源加载/打包工具，现在版本已经 release 到 v2.6.1，今天的文章不支持介绍Webpack的API及使用，而是对最近项目开发中使用Webpack打包时处理IE低版本(IE8及以下)浏览...

tanglijun 2019-08-20 16:55 评论0 收藏0
babel-preset-env

摘要：一作用根据你支持的环境自动决定适合你的插件二历史版本已被弃用特点包含了所有年度预设，无需用户单独指定某个预设。特点分别支持不同版本的规范，将转成，只将比新增加的特性转成。比如在整个应用里只能引入一次，可以在模块里一次引入。一、作用根据你支持的环境自动决定适合你的Babel插件二、历史版本（已被弃用） 1、babel-preset-latest 1.1 特点包含了所有年度预设（ ...

孙吉亮 2019-08-23 11:49 评论0 收藏0