前言

之前发布了一篇从零开始搭建 webpack4+react+kintone 的开发环境，小伙伴们是不是看的意犹未尽？

这次我们就来发布一个新的系列：利用webpack与vscode结合，搭建一个 kintone 开发环境。

在制作的过程中webpack4已经升级到webpack5了，那我们就利用最新版本的开始我们的旅程吧。

本次课题涉及到的内容比较多，我们一共分了九篇文章为大家梳理。

本文为大家带来初始化环境。

目录

第一篇:初始化项目
第二篇:代码规范
第三篇:Webpack 基本配置
第四篇:开发环境设置
第五篇:生产环境设置
第六篇:css、less、scss、图片支持
第七篇:IE11兼容
第八篇:支持React
第九篇:支持Typescript>
第十篇:命令行工具

基本环境

• Nodejs:我个人用的是 14.6 的版本，如果你使用低于这个版本的 Nodejs 并出现一些未在这里列出的问题的话，可以考虑升级到该版本。

• 软件包管理:macos: Homebrew / windows: Chocolatey，安装方式这里不在赘述，请自行搜索。

• 开发软件：Visual Studio Code

其他

本文基于macOS环境搭建，windows用户请把command键换成ctrl键，终端替换成powershell。

初始化项目

打开终端执行

#创建一个kintone-webpack-demo的空文件夹
mkdir kintone-webpack-demo

#进入kintone-webpack-demo
cd kintone-webpack-demo

#初始化npm
npm init -y

#使用Visual Studio Code打开当前目录
code .

package.json

现在在目录下只有一个 package.json，它的作用是记录项目的配置信息。让我们来修改成以下的样子：

{
  "name": "kintone-webpack-demo",
  "version": "1.0.0",
  "description": "webpack demo for kintone",
  "scripts": {
  },
  "keywords": [
    "kintone",
    "webpack"
  ],
  "author": "dld",
  "license": "MIT"
}

修改了以下值:

• description:添加了项目描述。

• main:入口文件，这里不需要。

• scripts:清空吧，默认的 test 没什么用。

• keywords:项目关键字，npm 上供他人检索用。

• author:作者的相关信息。

• license:我选择 MIT 协议。

LICENSE

一般开源项目都会要求选择协议，这里选了宽松的MIT协议，你也可以去choosealicense选择其他协议。
复制模版信息到根目录下新建的 LICENSE 文件中，并修改 [year] [fullname]。

当然，也可以用 Visual Studio Code 的扩展来完成这项工作。这里推荐 Choose A License

使用

command+shift+p

打开命令面板，输入 License:Choose license,选择 mit，即可生成新的LICENSE文件，修改[fullname]即可。

.npmrc

大陆地区使用 npm 安装依赖包时速度非常慢，这时候就需要设置淘宝镜像源:

#该命令会影响所全局设置
npm config set registry https://registry.npm.taobao.org

对于不想污染全局的同学，这里推荐的做法是，在项目根目录添加一个 .npmrc 文件, 并在该文件内输入如下配置：

registry=https://registry.npm.taobao.org/

.gitignore

使用 git 提交时，我们需要忽略一些文件/文件夹，如 nodejs 安装依赖用的 node_modules、webpack 生成的 dist、macos 自动生成的 DS_Store 等。

这里推荐 vscode 的 gitignore 插件，

使用

command+shift+p

打开命令面板，输入 Add gitignore，即可在输入框输入系统或编辑器名字，来自动添加需要忽略的文件或文件夹至 .gitignore 中。

我添加了： Node 、 Windows 、 MacOS 、 Vscode，
其他的如 package-lock.json、*.pem 等可自行手动输入至 .gitignore 中。

README.md

一般用来对项目进行介绍，这里大家先创建 README.md 文件，然后随意写点东西即可。

这时候我们项目目录下的文件结构如下：接下来会进入代码规范配置。

.
├── .gitignore
├── .npmrc
├── LICENSE
├── README.md
└── package.json