如何使用babel，把寫好的es6代碼，轉化為es5，讓ie8兼容。

szysky 發布于2019-08-22 17:25 / 1239人閱讀

摘要：現在有很過編譯的工具，比如是編譯，，，。這篇文字很簡單，就是讓我們使用語法的代碼，不僅僅可以讓谷歌瀏覽器看，還可以使用以上的瀏覽器看，其實就是把我們的代碼，把語法轉化為語法。下面我們以使用為例。里面的內容是全局安裝。

現在有很過編譯的工具，比如是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不兼容

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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