如何从 0 到 1 搭建一个现代前端项目|前端工程化 | 前端进阶之旅

# 第一步：从 0 到 Hello World

这里需要提前说明一下：在创建项目前，我默认屏幕前的各位已经有了一定的前端基础，如果是毫无基础的同学，可能对有些概念需要再辛苦勤劳一些，比如经常打开 Google 或掘金去搜索下相关的概念和用法。当然，这里我也默认你已经安装了 node 环境和 npm。

首先，创建一个以你项目命名的文件夹📂，比如我的就叫“0-1webpack”，创建完之后通过命令行打开当前目录，然后执行以下命令：

npm init
// 或
npm init -y

@前端进阶之旅: 代码已经复制到剪贴板

紧接着，命令行就会有交互提示，让我们输入一些项目的配置，你可以认真输入或是一路回车跳过稍后再填。

package name: (0-1webpack)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/workspace/self/0-1webpack/package.json:
{
  "name": "0-1webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Is this OK? (yes)

@前端进阶之旅: 代码已经复制到剪贴板

在 “Is this OK” 之后，你会发现我们的项目多了一个 package.json 配置文件，文件的内容就是刚刚我们通过命令行输入的内容。当然，除了使用 npm init之外，你也可以手动创建该 package.json 文件并添加配置字段。

因为我们要创建一个前端项目，前端就必然离不开 HTML、CSS、JS 三大模块。那么，接下来，我们在项目中创建 index.html和src 文件夹，并且在 src 文件夹中创建 index.js 。

touch index.html
mkdir src
touch src/index.js
touch src/style.css

@前端进阶之旅: 代码已经复制到剪贴板

至此，我们的目录已经搭建完毕了。然后我们在 index.html中填入基本 HTML5 标签结构，并引入脚本文件和样式文件。在 index.js 文件中简单操作下 DOM，方便直观地看出来该 JS 文件已经生效。同时在 css 中设置 #app 的字体颜色为 red。

// 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.0">
  <link rel="stylesheet" type="text/css" href="./src/style.css"/>
  <title>Document</title>
</head>
<body>
  <div id="app" />
  <script src="src/index.js"></script>
</body
</html>

// src/index.js
const app = document.querySelector('#app')
app.innerHTML = 'Hello World'


// src/style.css
#app{
  color: red
}