Vue, Webpack 4 & Babel 基础入门
在本教程中,我们将配置一个最小的构建链来创建 Vue 应用。
本文技术栈由下面组成:
- Vue: 组织代码
- Babel: 编译代码
- Webpack: 打包代码
为什么选择 Babel 和 Webapck?
- 两者都是各自领域的顶尖解决方案
- 两者都完美支持 vue-cli
1. Node
创建新的 Node 项目:
mkdir hello-vue
cd hello-vue
npm init -y
小提示 : 如果你运行 npm init
的时候附带参数 -f
, --force
, -y
或者 --yes
,那么该命令将使用默认参数且不会要求您提供任何参数选项。
2. Babel
介绍
什么是 Babel ?
Babel 是一个 Javascript 转换器,它将高级的 Javascript 转换成 可以在任何浏览器中运行的 ES5 Javascript (甚至是旧的浏览器)
Babel 官网: https://babeljs.io
安装
我们将使用下列的 Babel 库:
- babel-core: 包含核心的API。
- babel-preset-env: 自动确定你目标浏览器或者运行时的环境中需要的 Babel 插件和 Polyfill 。
- babel-preset-stage-3: 阶段 x 预置的任何转换都是对未被批准为 Javascript(如 ES6/ES2015)发行版本的 一部分的语言的更改。
npm install --save-dev babel-core babel-preset-env babel-preset-stage-3
小提示: "npm i -D" 是 "npm install-save-dev" 的别名
什么是 Babel preset ?
在 Babel 中,一个 preset 是一组用来支持特定语言特性的插件。
配置
在项目根目录下创建一个 .babelrc 文件,并写入以下内容:
"scripts": {
"dev": "webpack-dev-server --mode development --progress --hot --open",
"build": "webpack --mode production --progress"
}
.babelrc 的目的是什么?
.babelrc 是 Babel 标准配置文件。
https://babeljs.io/docs/usage/babelrc/
检验
我们将通过 Babel 内置的 CLI 来检验当前的配置。
npm install babel-cli --no-save
技巧: 我们仅用这个库来验证当前的配置,它不会成为我们最终构建链的一部分,所以我们不把它设为一个依赖,通过 --no-save 来指定。
- 在根目录下创建一个 dist 文件夹。
- 在根目录下创建一个 src 文件夹。
- 在 src 文件夹下创建一个 index.js 文件,并添加以下内容:
module.exports = {
module: {
rules: [
]
},
plugins: [
]
};
以上的代码片段演示了 rest 属性对对象解构 和 对象文本的拓展属性,该属性将通过 Babel 第 3 阶段预设来转换
首先转置源码:
npx babel src/index.js --out-file dist/main.js
然后运行转置后的代码:
node dist/main.js
将会输出以下内容:
1
2
{ a: 3, b: 4 }
记住上述的结果,我们将重新使用这个特定的转置测试来验证以后的构建步骤。
小提示: 查看 以下文章 来学习 npx 指令。
小提示: 查看 官方文档 来学习 Babel’s CLI。
配置: 插件
Webpack 有个强大的插件接口。Webpack 本身大部分的特性都使用这个插件接口。这使得 Webpack 具有灵活性。
我们将使用一个插件:html-webpack plugin
这是一个 webpack 插件,它简化了HTML 文件的创建,为你的 webpack 资源服务。这个插件对于在打包文件中使用了 hash 使得 webpack 资源每次打包都会变化时特别有用。你可以使用 lodash 模板或者你自己的加载器,让这个插件根据你提供的模板,为你创建一个 HTML 文件。
安装插件:
npm install --save-dev html-webpack-plugin
更新 webpack 配置:
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
module: {
rules: [
// Loaders
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
};
我们引用了一个模板,但目前还不存在。在 src 目录下创建一个 index.html文件,并加入以下的内容:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Hello Vue</title>
</head>
<body>
<!-- Our vue app will be mounted on this DOM element -->
<div id="app"></div>
<!-- Bundle will be injected below -->
</body>
</html>
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
推荐文章: