使用babel將es6語法轉化成es5(多個js文件)

最近修改以前的老項目,不知不覺就把es6語法統統用上,調試的時候是谷歌瀏覽器,一切正常.(*^▽^*)然鵝,到了IE瀏覽器發現頁面根本出不來,大意了,忘了老代碼沒有語法轉譯.o(╥﹏╥)o

於是查了下,用babel轉換了一下,基本上沒問題了,所以記錄一下轉換方法

轉換需要安裝node和git, 應該基本都安裝了吧,這里不介紹了

第一步:

新建一個項目文件,文件名稱隨意,進入文件,使用git命令初始化, npm init -y,執行命令后會多一個文件package.json

 

第二步:

新建一個文件夾src(名稱隨意),把需要轉換的JS文件放在里面

 

第三步:

安裝babel相關安裝包

npm install --save-dev @babel/core @babel/cli @babel/preset-env

npm install --save @babel/polyfill

第四步:

在根目錄下新建一個文件babel.config.json,寫入內容,主要是配置瀏覽器的最低兼容版本

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1",
        },
        "useBuiltIns": "usage",
      }
    ]
  ]
}

 

第五步:

在命令窗口輸入./node_modules/.bin/babel src --out-dir lib

src是你需要轉換的文件夾名稱 lib是放置轉換后的文件名稱

轉換成功后,項目文件中就多了一個lib文件夾,里面的JS文件就是轉換后

如果不想每次轉換都輸入這么長一串命令,可以在package.json中設置替換命令,設置后每次輸入npm run babel就能轉換了

"scripts": {
    "babel": "./node_modules/.bin/babel src --out-dir lib",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

 

 以上轉換是沒有經過代碼壓縮的,如果需要代碼壓縮,可以加入webpack來實現

  

  一.安裝webpack相關安裝包

  npm install --save webpack webpack-cli

 

  二.在根目錄新建一個文件webpack.config.js,寫入內容

module.exports = {
  entry: { // 這種配置是多文件打包,打包出來的文件還是多個
    app: './src/index.js',
    projectLoanEntry: './src/projectLoanEntry.js',
    projectProduct: './src/projectProduct.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  },
  // entry: './src/index.js', // 這種配置打包后的JS文件會放在一個文件里
  // output: {
  //   path: path.resolve(__dirname, 'dist'),
  //   filename: 'bundle.js'
  // }
   module: {
     rules: [
       {
         test: /\.js$/,
         exclude: /node_modules/,
         use: {
           loader: 'babel-loader',
           options: {
            presets: ['@babel/preset-env']
          }
        }
       }
     ]
   }
};

 

三.在package.js里設置打包命令

  "scripts": {
    "build": "webpack",
    "babel": "./node_modules/.bin/babel src --out-dir lib",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

在命令窗口輸入npm run build,打包成功后文件會多一個dist目錄,里面的文件就是語法轉義加打包壓縮過的文件

   注意:在安裝babel相關包時,要注意包的版本問題,新版的babel安裝包帶有@前綴,如果安裝的包版本不一致,打包會報錯

  這種情況需要刪除node_modules文件, rm -rf node_modules 這個指令可以快速刪除包,刪除后重新下載就可以了

 

文件目錄: