Webpack5+vscode搭建kintone开发环境(一)初始化项目

cybozu发表于:2021年01月07日 14:16:51更新于:2021年07月28日 14:29:28

前言

之前发布了一篇从零开始搭建 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
0015ff6c0c99eeb36cc6919ae576207

使用

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 插件,

0015ff6c16e68768d4642d51849bf6f

使用

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


    注意:贴代码时请注意格式并使用"代码语言",与本文无关的问题请至“讨论社区”提问。