Koa+Webpack4+Vue.js 搭建前端项目-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，各种框架和工具层出不穷，不同的开发者有着不同的喜好和选择，但正如职业选手常说的：使用好的工具，事半功倍。在本文中，我们将介绍如何使用 Koa 2.x，Webpack 4.x 和 Vue.js 框架来搭建一个前端项目。

环境准备

在开始之前，确保你已经正确安装 Node.js 和 npm。

$ node -v
v10.16.0

$ npm -v
6.9.0

创建项目

首先我们来创建一个新的项目，我们将使用 npm init 命令来生成一个 package.json 文件。

$ mkdir my-app && cd my-app
$ npm init -y

安装依赖

使用以下命令来安装必要的依赖：

$ npm install --save-dev webpack webpack-cli webpack-dev-server
$ npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime

其中：

webpack：打包工具
webpack-cli：webpack 命令行工具
webpack-dev-server：提供开发服务器
babel-loader：用于将 ES6+ 语法转成 ES5 语法
@babel/core：babel 的核心库
@babel/preset-env：根据配置条件自动启用需要的 babel 插件
@babel/plugin-transform-runtime：babel 遇到需要编译的代码时，自动引入 polyfill，并且不会污染全局环境

接下来，我们需要安装 Koa 和 Koa 路由模块，以及 Vue.js 和 Vue 路由模块：

$ npm install --save koa koa-router
$ npm install --save vue vue-router

配置文件

在项目目录下创建一个 webpack.config.js 文件，添加以下内容：

// javascriptcn.com 代码示例
const path = require('path');

module.exports = {
  mode: 'development', // 模式，用于输出调试信息，"production" 会被压缩和优化
  entry: './src/index.js', // webpack 入口文件
  output: {
    filename: 'bundle.js', // webpack 输出文件名
    path: path.resolve('dist') // webpack 输出文件目录
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-transform-runtime']
          }
        }
      }
    ]
  }
}

在项目目录下创建一个 babel.config.js 文件，添加以下内容：

// javascriptcn.com 代码示例
module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        useBuiltIns: "usage",
        corejs: 3
      }
    ]
  ]
}

在项目目录下创建一个 index.html 文件，添加以下内容：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>My App</title>
</head>
<body>
  <div id="app"></div>
  <script src="./bundle.js"></script>
</body>
</html>

在项目目录下创建一个 app.js 文件，添加以下内容：

// javascriptcn.com 代码示例
const Koa = require('koa');
const Router = require('koa-router');
const path = require('path');
const staticServe = require('koa-static'); // 静态资源服务

const app = new Koa();
const router = new Router();

// 访问根目录时，返回 index.html
router.get('/', async ctx => {
  ctx.response.type = 'html';
  ctx.response.body = require('fs').createReadStream('./index.html');
});

// 配置静态资源
app.use(staticServe(path.join(__dirname, 'dist')));

// 注册路由
app.use(router.routes());

app.listen(3000, () => console.log('Server is listening on http://localhost:3000'));

在项目目录下创建一个 src/index.js 文件，添加以下内容：

// javascriptcn.com 代码示例
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history', // 路由模式，去掉 "#"
  routes: []
});

new Vue({
  router,
  el: '#app',
  template: '<router-view />'
});

运行开发服务器

在 package.json 文件中添加以下命令：

{
  "scripts": {
    "start": "webpack-dev-server --config webpack.config.js --mode development --open"
  }
}

使用以下命令来运行开发服务器：

$ npm start

现在你可以在浏览器中访问 http://localhost:8080 来预览你的网站了。

打包

使用以下命令来打包项目：

$ webpack --mode production

这将在 dist 目录下生成一个 bundle.js 文件和一个 index.html 文件。

总结

使用 Koa+Webpack4+Vue.js 搭建前端项目，可以更好地体验和把握前端的开发流程，帮助前端开发者拥有更好的开发体验和性能，欢迎前端开发者们尝试使用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652cfca07d4982a6ebe7da0a