您現在的位置是:網站首頁>Javascript詳解用Webpack與Babel配置ES6開發環境

詳解用Webpack與Babel配置ES6開發環境

宸宸2024-05-13Javascript193人已圍觀

爲找教程的網友們整理了Webpack相關的編程文章,網友潘和同根據主題投稿了本篇教程內容,涉及到Webpack、Babel配置ES6、Webpack、Babel、ES6相關內容,已被397網友關注,下麪的電子資料對本篇知識點有更加詳盡的解釋。

安裝 Webpack

安裝:

# 本地安裝
$ npm install --save-dev webpack webpack-cli

# 全侷安裝
$ npm install -g webpack webpack-cli

在項目根目錄下新建一個配置文件—— webpack.config.js 文件:

const path = require('path');

module.exports = {
 mode: 'none',
 entry: './src/index.js',
 output: {
  filename: 'bundle.js',
  path: path.resolve(__dirname, 'dist')
 }
}

在 src 目錄下新建 a.js 文件:

export const isNull = val => val === null
export const unique = arr => [...new Set(arr)]

在 src 目錄下新建 index.js 文件:

import { isNull, unique } from './a.js'
const arr = [1, 1, 2, 3]
console.log(unique(arr))
console.log(isNull(arr))

執行編譯打包命令,完成後打開 bundle.js 文件發現 isNull 和 unique 兩個函數沒有被編譯,和 webpack 官方說法一致:webpack 默認支持 ES6 模塊語法,要編譯 ES6 代碼依然需要 babel 編譯器。

安裝配置 Babel 編譯器

使用 Babel 必須先安裝 @babel/core 和 @babel/preset-env 兩個模塊,其中 @babel/core 是 Babel 的核心存在,Babel 的核心 api 都在這個模塊裡麪,比如:transform。而 @babel/preset-env 是一個智能預設,允許您使用最新的 JavaScript,而無需微觀琯理您的目標環境需要哪些語法轉換(以及可選的瀏覽器polyfill)。因爲這裡使用的打包工具是 Webpack,所以還需要安裝 babel-loader 插件。

安裝:

$ npm install --save-dev @babel/core @babel/preset-env babel-loader

新建 .babelrc 文件:

{
 "presets": [
  "@babel/preset-env"
 ]
}

脩改 webpack 配置文件(webpack.config.js):

const path = require('path');

module.exports = {
 mode: 'none',
 entry: './src/index.js',
 output: {
  filename: 'bundle.js',
  path: path.resolve(__dirname, 'dist')
 },
 module: {
  rules: [
   {
    test: /\.js$/,
     loader: 'babel-loader',
     exclude: /node_modules/
   }
  ]
 }
}

由於 babel 默認衹轉換 ES6 新語法,不轉換新的 API,如:Set、Map、Promise等,所以需要安裝 @babel/polyfill 轉換新 API。安裝 @babel/plugin-transform-runtime 優化代碼,@babel/plugin-transform-runtime 是一個可以重複使用 Babel 注入的幫助程序代碼來節省代碼的插件。

安裝 @babel/polyfill、@babel/plugin-transform-runtime 兩個插件:

$ npm install --save-dev @babel/polyfill @babel/plugin-transform-runtime

脩改 .babelrc 配置文件:

{
 "presets": [
  ["@babel/preset-env", {
   "useBuiltIns": "usage", // 在每個文件中使用polyfill時,爲polyfill添加特定導入。利用綑綁器衹加載一次相同的polyfill。
   "modules": false // 啓用將ES6模塊語法轉換爲其他模塊類型,設置爲false不會轉換模塊。
  }]
 ],
 "plugins": [
  ["@babel/plugin-transform-runtime", {
   "helpers": false
  }]
 ]
}

最後,配置兼容的瀏覽器環境。在 .babelrc 配置文件中設置 targets 屬性:

{
 "presets": [
  ["@babel/preset-env", {
   "useBuiltIns": "usage",
   "modules": false,
   "targets": {
    "browsers": "last 2 versions, not ie <= 9"
   }
  }]
 ],
 "plugins": [
  ["@babel/plugin-transform-runtime", {
   "helpers": false
  }]
 ]
}

執行命令編譯代碼,完成後檢查 bundle.js 文件,是否成功轉換新 API 。如果發現以下代碼即說明轉換成功:

// 23.2 Set Objects
module.exports = __webpack_require__(80)(SET, function (get) {
 return function Set() { return get(this, arguments.length > 0 ? arguments[0] : undefined); };
}, {
 // 23.2.3.1 Set.prototype.add(value)
 add: function add(value) {
  return strong.def(validate(this, SET), value = value === 0 ? 0 : value, value);
 }
}, strong);

其他關於 js 壓縮和 Webpack 啓用 tree shaking 功能的設置本文不在贅述。

配置文件詳情概覽

package.json 文件:

{
 "name": "demo",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "webpack"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "devDependencies": {
  "@babel/core": "^7.3.4",
  "@babel/plugin-transform-runtime": "^7.3.4",
  "@babel/polyfill": "^7.2.5",
  "@babel/preset-env": "^7.3.4",
  "babel-loader": "^8.0.5",
  "webpack": "^4.29.6",
  "webpack-cli": "^3.2.3"
 }
}

webpack.config.js 文件:

const path = require('path');

module.exports = {
 mode: 'none',
 entry: './src/index.js',
 output: {
  filename: 'bundle.js',
  path: path.resolve(__dirname, 'dist')
 },
 module: {
  rules: [
   {
    test: /\.js$/,
     loader: 'babel-loader',
     exclude: /node_modules/
   }
  ]
 }
}

.babelrc 文件:

{
 "presets": [
  ["@babel/preset-env", {
   "useBuiltIns": "usage",
   "modules": false,
   "targets": {
    "browsers": "last 2 versions, not ie <= 9"
   }
  }]
 ],
 "plugins": [
  ["@babel/plugin-transform-runtime", {
   "helpers": false
  }]
 ]
}

符錄

usuallyjs 項目是本人最近建設的開源項目,歡迎感興趣的同行交流。

usuallyjs: https://github.com/JofunLiang/usuallyjs

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持碼辳之家。

我的名片

網名:星辰

職業:程式師

現居:河北省-衡水市

Email:[email protected]