安裝 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 === nullexport 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 Objectsmodule.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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
