安裝 Webpack
成都創(chuàng)新互聯(lián)公司主營(yíng)涉縣網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,app軟件開(kāi)發(fā)公司,涉縣h5微信小程序開(kāi)發(fā)搭建,涉縣網(wǎng)站營(yíng)銷(xiāo)推廣歡迎涉縣等地區(qū)企業(yè)咨詢(xún)
安裝：
# 本地安裝 $ npm install --save-dev webpack webpack-cli # 全局安裝 $ npm install -g webpack webpack-cli
在項(xiàng)目根目錄下新建一個(gè)配置文件—— 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))執(zhí)行編譯打包命令，完成后打開(kāi) bundle.js 文件發(fā)現(xiàn) isNull 和 unique 兩個(gè)函數(shù)沒(méi)有被編譯，和 webpack 官方說(shuō)法一致：webpack 默認(rèn)支持 ES6 模塊語(yǔ)法，要編譯 ES6 代碼依然需要 babel 編譯器。
安裝配置 Babel 編譯器
使用 Babel 必須先安裝 @babel/core 和 @babel/preset-env 兩個(gè)模塊，其中 @babel/core 是 Babel 的核心存在，Babel 的核心 api 都在這個(gè)模塊里面，比如：transform。而 @babel/preset-env 是一個(gè)智能預(yù)設(shè)，允許您使用最新的 JavaScript，而無(wú)需微觀管理您的目標(biāo)環(huán)境需要哪些語(yǔ)法轉(zhuǎn)換（以及可選的瀏覽器polyfill）。因?yàn)檫@里使用的打包工具是 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 默認(rèn)只轉(zhuǎn)換 ES6 新語(yǔ)法，不轉(zhuǎn)換新的 API，如：Set、Map、Promise等，所以需要安裝 @babel/polyfill 轉(zhuǎn)換新 API。安裝 @babel/plugin-transform-runtime 優(yōu)化代碼，@babel/plugin-transform-runtime 是一個(gè)可以重復(fù)使用 Babel 注入的幫助程序代碼來(lái)節(jié)省代碼的插件。
安裝 @babel/polyfill、@babel/plugin-transform-runtime 兩個(gè)插件：
$ npm install --save-dev @babel/polyfill @babel/plugin-transform-runtime
修改 .babelrc 配置文件：
{
"presets": [
["@babel/preset-env", {
"useBuiltIns": "usage", // 在每個(gè)文件中使用polyfill時(shí)，為polyfill添加特定導(dǎo)入。利用捆綁器只加載一次相同的polyfill。
"modules": false // 啟用將ES6模塊語(yǔ)法轉(zhuǎn)換為其他模塊類(lèi)型，設(shè)置為false不會(huì)轉(zhuǎn)換模塊。
}]
],
"plugins": [
["@babel/plugin-transform-runtime", {
"helpers": false
}]
]
}
最后，配置兼容的瀏覽器環(huán)境。在 .babelrc 配置文件中設(shè)置 targets 屬性：
{
"presets": [
["@babel/preset-env", {
"useBuiltIns": "usage",
"modules": false,
"targets": {
"browsers": "last 2 versions, not ie <= 9"
}
}]
],
"plugins": [
["@babel/plugin-transform-runtime", {
"helpers": false
}]
]
}執(zhí)行命令編譯代碼，完成后檢查 bundle.js 文件，是否成功轉(zhuǎn)換新 API 。如果發(fā)現(xiàn)以下代碼即說(shuō)明轉(zhuǎn)換成功：
// 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);
其他關(guān)于 js 壓縮和 Webpack 啟用 tree shaking 功能的設(shè)置本文不在贅述。
配置文件詳情概覽
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 項(xiàng)目是本人最近建設(shè)的開(kāi)源項(xiàng)目，歡迎感興趣的同行交流。
usuallyjs: https://github.com/JofunLiang/usuallyjs
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
