Vue, Webpack 4 & Babel 基础入门

file

在本教程中,我们将配置一个最小的构建链来创建 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 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

原文地址:

译文地址:https://learnku.com/vuejs/t/23333/gettin...

本文为协同翻译文章,如您发现瑕疵请点击「改进」按钮提交优化建议
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!