注意:本文所有依賴包是目前最新版本的
現在很多開發朋友對於使用webapck
、babel
搭建開發環境已經不陌生,但很少去系統性的瞭解項目依賴。
本文從環境依賴包說起,讓你對自己的開發環境有更深的瞭解。
爲了簡單,我們將依賴分個類:Babel相關🔥
、Webpack相關🔥
、可選的依賴包
。
注意:帶🔥 是指必需的依賴, 下面我們一個一個來說。
Babel相關🔥
要使用最新的ES6+
語法,必須少不了Babel
轉碼,那麼要搭建一個完全體的環境,應該使用哪些依賴呢?
首先,我們安裝最核心的依賴: @babel/cli
、@babel/core
、@babel/polyfill
、@babel/register
、core-js
下面是他們的一些簡單解釋:
{
/*
Babel 自帶了一個內置的 CLI 命令行工具,可通過命令行編譯文件。
*/
"@babel/cli": "^7.4.3",
/*
看到`core`就知道它是`babel`的核心,一些轉碼操作都是基於它完成的,
所以它是必須的依賴。
*/
"@babel/core": "^7.4.3",
/*
Babel默認只轉換新的JavaScript語法,但是不轉換新的API,比如
`Iterator`、`Generator`、`Set`、`Maps`、`Proxy`、`Reflect`、
`Symbol`、`Promise` 等全局對象,以及一些定義在全局對象上的方法(比
如 `Object.assign` )都不會轉碼。而`@babel/polyfill`就可以做到。
*/
"@babel/polyfill": "^7.4.3",
/*
讓webpack.config.babel.js也支持ES6語法
*/
"@babel/register": "^7.4.0",
/*
通俗說就是動態polyfill,它可以動態加載需要的新API,具體可以看https://github.com/zloirock/core-js#readme
*/
"core-js": "3",
}
下面我們安裝必需的preset和plugin:@babel/preset-env
、@babel/plugin-proposal-class-properties
、@babel/plugin-proposal-decorators
、@babel/plugin-proposal-object-rest-spread
、@babel/plugin-syntax-dynamic-import
下面是它們的一些解釋:
{
/*
根據指定環境來轉碼,這個不用說,必裝
*/
"@babel/preset-env": "^7.4.3",
/*
對class中屬性初始化語法、static等語法進行處理
*/
"@babel/plugin-proposal-class-properties": "^7.4.0",
/*
裝飾器語法處理
*/
"@babel/plugin-proposal-decorators": "^7.4.0",
/*
對象rest、spread語法處理
*/
"@babel/plugin-proposal-object-rest-spread": "^7.4.3",
/*
import()語法處理
*/
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
}
安裝好了以上preset和plugins,我們需要新建一個.babelrc
文件來使用它們:
{
"presets": [
[
"@babel/env",
{
"useBuiltIns": "usage",
//如果useBuiltIns選項爲usage,則要申明corejs的版本,這也是爲什麼要安裝core-js的原因
"corejs": "3",
"loose": true
}
],
"@babel/typescript", //如果你的環境有typescript,記得安裝它
"@babel/react" //如果你使用了react,也要記得安裝哦
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"@babel/proposal-class-properties",
{
"loose": true
}
],
"@babel/proposal-object-rest-spread",
"@babel/plugin-syntax-dynamic-import"
]
}
以上我們對於ES6+
最新語法的轉碼已經完全沒有問題了,下面我們開始說說Webpack
有哪些必需要安裝的依賴
Webpack相關🔥
上面的Babel
轉碼已經配置完成。但我們要使用它們,還要依靠webpack
來告訴我們需要轉碼的項目入口以及在轉碼過程中需要的配置(比如loader)。
既然需要webpack,那麼我們安裝webapck以及它必需的依賴包:webpack
、webpack-cli
、webpack-dev-server
、babel-loader
、html-webpack-plugin
安裝完成後我們新建webpack.config.babel.js
,然後我們來配置一下:
import webpack from 'webpack';
import path from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';
export default {
mode: 'development',
entry: {
app: path.resolve(__dirname, '../src/index.tsx')
},
devtool: 'cheap-module-source-map',
output: {
path: path.resolve(__dirname, '../build'),
filename: 'bundle-[name]-[hash].js',
chunkFilename: 'chunk-[name]-[hash].js'
},
resolve: {
extensions: ['.tsx', '.ts', '.js', '.less', '.json'],
modules: ['node_modules']
},
module: {
rules: [
{
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader'
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../src/index.ejs'),
templateParameters: {
title: 'test'
}
})
],
devServer: {
port: 8080,
host: 'localhost',
disableHostCheck: true
}
};
細心的人看出來,上面的配置用的是ES6
的寫法,要做到這點需要滿足:
- 文件名稱必須是
webpack.config.babel.js
- 需要安裝
@babel/register
這個我們前面已經安裝了
tips: 這裏我使用的是ejs
作爲html
的模板。
到這裏,必需的依賴包已經安裝完成了,下面的可選依賴是根據大家項目的具體情況去安裝,比如樣式、圖片、字體、css壓縮配置等等...
這裏我推薦幾個好用的依賴包:
{
/*
將CSS提取爲獨立的文件的插件,對每個包含css的js文件都會創建一個CSS文件,支持按需加載css和sourceMap
*/
"mini-css-extract-plugin": "^0.6.0",
/*
css壓縮
*/
"optimize-css-assets-webpack-plugin": "^5.0.1",
/*
對打包的js進行壓縮處理的webapck插件
*/
"terser-webpack-plugin": "^1.2.3",
/*
多進程處理打包,加快打包速度
*/
"thread-loader": "^2.1.2",
/*
webpack打包進度條
*/
"webpackbar": "^3.2.0"
}
至於webpack裏的各種loader,大家根據自己的項目去安裝吧。
就說到這裏啦,如果你有好用的npm包,歡迎推薦~