使用npm构建前端项目基本流程

现在各种前端框架, 库文件基本都托管到npm上, 我们平常下载到别人的项目文件, 也基本是用npm

构建的, 不了解点node和npm那是寸步难行.

下面介绍的代码示例不敢说是最佳实践, 但都是我亲自在自己机器上测试有效的.

测试环境: win10, node v8.4, npm v5.3.

package.json

package.json文件非常重要, 我们拿到别人的项目第1眼便是看package.json里有什么, 我们自己

创建个新项目, 首先就要创建好package.json文件.

假设我们的项目需要使用jQuery, 我们新建一个demo目录, 并在里面新建一个package.json.

把下面这些基本模板内容, 复制粘贴进去.

{

    "name": "demo",

    "version": "1.0.0",

    "description": "sdsd",

    "main": "index.js",

    "scripts": {

        "test": "echo \"Error: no test specified\" && exit 1"

    },

    "author": "sheng",

    "license": "MIT",

    "keywords": [

        "key1",

        "key2"

    ],

    "dependencies": {},

    "devDependencies": {},

    "repository": {

        "type": "git",

        "url": "test-repo"

    }

}

文件编码建议使用UTF-8, 换行建议使用LF

上面的JSON文件, 就对我们的demo项目作了最简单的描述.

name            项目名称, 默认使用项目文件夹名.

version         项目版本, 默认版本为1.0.0.

description     项目描述, 简要说明我们的项目是干啥的.

main            指定项目的入口文件.

scripts         测试脚本.

author          项目作者.

license         项目使用的协议.

repository      项目所在的远程仓库, 比如在GitHub上.

keywords        项目关键字. 

dependencies    生产环境中项目依赖

devDependencies 开发环境中项目依赖

关于项目的一堆描述, 在我们初学阶段, 感觉都无关紧要, 什么项目名字, 版本, 作者之类, 大家

随便写写就行. 我们只关注两个重要的项目描述dependencies和devDependencies, 它

分别表示在生成环境所需的项目依赖, 和在开发环境中所需要的项目依赖. 初学阶段这两个也不用,

可以区分, 统一理解为是我们需要的项目依赖即可.

打开cmd系统命令行, 切换到当前项目目录, 对于我的机器来说是

D:\Asheng_IDE\FrontEnd\study_tree\react\demo, 接下来输入npm安装命令npm install jquery.

这一步骤执行完毕之后, 我们会发现在我们的项目目录里多了一个文件夹node_modules, 可以看到

里面有一个文件夹jquery, 这正是我们安装的包. 我们还发现项目目录里多了一个package-lock.json,

文件, 这是npm自动为我们创建的, 打开这个文件我们可以看到里面写有jquery依赖信息, 不用管它.

再打开, 我们自己创建的package.json文件, 发现在dependencies栏目下, 已经添加上了jquery依赖

信息.

手动修改package.json文件

手动修改package.json文件即可方便的实现, 对依赖包的安装, 移除, 更新等功能. 方法很简单, 比如

把上面我们依赖信息中的"jquery": "^3.2.1", 直接删除, 在执行npm install, npm就会自动同步

package.json的依赖情况, 也就是会把我们已经下载好的jquery包, 删除. 如果项目里只依赖一个包,

而我们又把这个包在package.json中的信息删除了, 那么npm直接把node_mudlues文件也一并删除.