Vue, Webpack 4 & Babel 基础入门

翻译 田勇 ⋅ 于 1周前 ⋅ 88 阅读 ⋅ 原文地址
这是一篇协同翻译的文章,目前翻译进度为 17%,你可以点击『我来翻译』按钮来 参与翻译

file

在本教程中,我们将配置一个最小的构建链来创建 Vue 应用。

本文技术栈由下面组成:

  • Vue: 组织代码
  • Babel: 编译代码
  • Webpack: 打包代码

为什么选择 Babel 和 Webapck?

  • 两者都是各自领域的顶尖解决方案
  • 两者都完美支持 vue-cli
XiaoTeng 翻译于 1周前

1. Node

创建新的 Node 项目:

mkdir hello-vue

cd hello-vue

npm init -y

小提示 : 如果你运行 npm init 的时候附带参数 -f , --force , -y 或者 --yes ,那么该命令将使用默认参数且不会要求您提供任何参数选项。

XiaoTeng 翻译于 1周前

2. Babel

Introduction

What is Babel?

Babel is a JavaScript transpiler that converts edge JavaScript into plain old ES5 JavaScript that can run in any browser (even the old ones).

Babel website: https://babeljs.io

Installation

We will be using the following Babel libraries:

  • babel-core: contains the core API.
  • babel-preset-env: automatically determines the Babel plugins and polyfills you need based on your targeted browser or runtime environments.
  • babel-preset-stage-3: any transforms in stage-x presets are changes to the language that haven’t been approved to be part of a release of Javascript (such as ES6/ES2015).

npm install --save-dev babel-core babel-preset-env babel-preset-stage-3

Tip: "npm i -D" is a shorter alias for "npm install-save-dev"

What is a Babel preset?

In Babel, a preset is a set of plugins used to support particular language features.

Configuration

Inside the root directory, create a .babelrc file with the following contents:

"scripts": {
  "dev": "webpack-dev-server --mode development --progress --hot --open",
  "build": "webpack --mode production --progress"
}

What is the purpose of .babelrc?

.babelrc is the standard configuration file for Babel.

https://babeljs.io/docs/usage/babelrc/

Verification

To verify the current configuration we will be transpiling a file via Babel’s built-in CLI.

npm install babel-cli --no-save

Trick: we will only use this library to verify the current configuration, it will not be part of our final build chain, we are therefore not saving it as a dependency. This behavior can be specified via the --no-save flag.

  • Inside the root directory, create a dist folder.
  • Inside the rootdirectory, create a src folder.
  • Inside the src directory, create an ‘index.js’ file with the following contents:
module.exports = {
  module: {
      rules: [

      ]
  },
  plugins: [

  ]
};

The above snippet demonstrates rest properties for object destructuring assignment and spread properties for object literals, a feature that will be transformed by Babel’s stage 3 preset.

First transpile the source:

npx babel src/index.js --out-file dist/main.js

Then run the transpiled output:

node dist/main.js

The following should be logged:

1

2

{ a: 3, b: 4 }

Keep in mind the above result, we will be re-using this particular transpilation test to verify future build steps.

Tip: checkout the following article to learn more about the npx command.

Tip: checkout the official documentation to learn more about Babel’s CLI.

3. Webpack

Introduction

What is Webpack?

At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into one or more bundles.

https://webpack.js.org/

https://webpack.js.org/concepts/

Installation

We will be using the following Webpack libraries:

  • webpack
  • webpack-cli: encapsulates all code related to command line interface handling.
  • webpack-dev-server: serves a webpack app and updates the browser on changes.

npm install --save-dev webpack webpack-cli webpack-dev-server

Add the following scripts to your package.json:

"scripts": {
  "dev": "webpack-dev-server --mode development --progress --hot --open",
  "build": "webpack --mode production --progress"
}

The --mode flag specifies the mode to use (production or development).

The --progress flag specified whether to print compilation progress.

CLI documentation: https://webpack.js.org/api/cli/

DevServer documentation: https://webpack.js.org/configuration/dev-server/#devserver

Configuration: base

Create a webpack.config.js file with the following contents:

module.exports = {
  module: {
      rules: [

      ]
  },
  plugins: [

  ]
};

Want to learn more about Webpack’s configuration file? Checkout https://webpack.js.org/configuration/

Configuration: loaders

Loaders are transformations that are applied on the source code of a module. They allow you to pre-process files as you import or “load” them.

We will be using the following loaders:

  • babel-loader: allows transpiling JavaScript files using Babel and webpack.
  • vue-loader: .vue component loader.

npm install --save-dev babel-loader vue-loader vue-template-compiler

Note: vue-template-compiler is a peer dependency of vue-loader.

Update Webpack configuration:

module.exports = {
  module: {
      rules: [
        {
            test: /\.vue$/,
            exclude: /node_modules/,
            loader: 'vue-loader'
        },
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
            loader: 'babel-loader'
            }
        }
      ],
  },
  plugins: [

  ]
};

Configuration: plugins

Webpack has a rich plugin interface. Most of the features within webpack itself use this plugin interface. This makes webpack flexible.

We will be using one plugin: html-webpack plugin

This is a webpack plugin that simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation. You can either let the plugin generate an HTML file for you, supply your own template using lodash templates or use your own loader.

Install the plugin:

npm install --save-dev html-webpack-plugin

Update webpack configuration:

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  module: {
    rules: [
      // Loaders
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

We are referencing a template but it does not exist yet, create an index.html file in the src directory with the following contents:

<!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>

Verification

  • npm run build
  • Open dist/index.html in browser.
  • Open the browser console, verify logs.

4. Vue

Installation

npm install vue

Creating a Vue component

Inside the src directory create a Vue component named App.vue with the following contents:

<template>
  <h1>{{ message }}</h1>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
};
</script>

To learn more about single file components: https://vuejs.org/v2/guide/single-file-components.html

Creating the application entry point

Delete all code inside index.js and replace it with the following:

import Vue from 'vue';

import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App)
});

Verification

The end

We are done setting up our minimal build chain!

If you have questions or feedback you are welcome to get in touch via Twitter.

原文地址:

译文地址:https://vuejscaff.com/topics/99/getting-...


本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

文章译者

回复数量: 0
    暂无评论~~
    您需要登陆以后才能留下评论!

    Vue.js 官方中文文档

    前端开发环境部署