npm包及导入导出模块在Javascript中的应用

在JavaScript项目实施中，npm帮助我们进行程序包和依赖文件的管理。如果你具备了相关JavaScript框架的知识，那么了解npm是非常用用的。

1. 什么是npm？

Npm是node默认的包管理程序。它主要在项目中进行安装、分享、和管理JavaScript包
Npm有三个组成部分：
a.网页（用相关的网页进行JavaScript包的发掘、分享和查看）
b.命令界面（LTI）（执行相关的命令来运行npm对包的相关操作，如安装、卸载及更新等）
c.注册页面（注册页面为所有npm包的所在地，用来下载、发布包等）
注意：
a.npm可以用来发布和管理私有包。
b.“包”是用来执行一个或多个功能的程序块。
1.1 如何安装npm？
Npm伴随着node.js，所有不用去单独的安装他。在系统上安装node.js后，npm就会存在。
To install node.js, visit https://nodejs.org/en/download, and install its LTS (Long Term Support) version.
node.js 安装地址:https://nodejs.org/en/download,下载并安装LTS(Long Term Support)版本。
安装完成后，用下列命令检查是否安装成功。
（ctl+r，弹出cmd窗后，输入下列命令）
// to check nodejs’s version
node -v or node --version // to check npm’s version
npm -v or npm --version
如果安装成功，执行上述命令后，在命令界面会出现:

1.2 package.json介绍
package.json 文件好像是工程文件的装箱单.它令安装和管理JavaScript包更方便。它包含有所有的工程元数据，分享给其他开发者会很方便。
根据官方文件，package.json文件主要由以下作用：
a.列出工程所需要的所有包；
b.指定包的版本信息，你的工程能够用语法定义；
c.能够让你的工程可以在生，并且方便于和其他开发者共享。
如何生成package.json文件？
在工程目录下，进行cmd控制框，输入: npm init。输入命令并回车后，会让你填写工程文件的相关信息，你可以填写，或者一路回车，默认生成。
例子如下：

也可以npm init -y直接默认生成package.json文件。

从上面的两个例子可以看出，package.json文件含有一些名称、描述、版本和作者等相关信息。
1.3 重要的npm命令:
1.3.1局部安装
npm install
如下，我们安装lodash。

安装完成后，工程文件下会生成如下文件：
node_modules（文件夹）和package-lock.json文件。

node_modules文件夹包含有包的所有依赖文件，
package.json文件含有确切的依赖文件的信息。
若果以全局的方式安装包，用以下命令：
npm i install -g/–global

注意
1.自己工程中用到”包”文件需要采用局部安装的方式;
2.如果想在命令端或者ctl中应用,需要采用全局安装的方式.

通过上图,你会发现,loadash加入到package.json的dependencies列中,而nodemon因为全局安装而没有加入到里面.
“devDependencies”：
这个列中含有工程文件开发阶段需要的文件。如果仅仅安装工程文件开发阶段的文件，用下面的命令：
npm -i --save-dev
如下所示.

检查package.json文件,它会如下所示:

eslint加入到devDependencies列表中。
安装包的某个具体版本。
npm i @version

在package.json中观察loadash的版本，如下所示：

更新npm包命令
npm update 或则 run npm update .

更新版本后的包如下所示。

更新全局包，用如下命令：
run npm update -g.
卸载npm包命令
npm uninstall

从package.json文件安装包命令
向团队分享文件时，用package.json即可，不用分享node_modules文件夹.
// Install packages from package.json
npm install or npm i

执行上述命令后,会安装工程中所有的包及依赖文件.
注意:
1.npm初期是为了node设计的,但是很多的前端摄取也可以使用它;
2.我们不能在script标签中使用npm包，我们需要使用webpack或则parcel。但是这些工作工具不是必须的。有些框架中含有这些功能，茹react-cra和vue-cli。

2. JavaScript中实现模块的导入与导出

JavaScript模块是一些实现特定功能的文件，它们需要加入主文件。
模块主要的特点是重复性、将大文件分割为小文件、避免命名冲突等。
下面所要讨论的事ES6模块的输入\输出命令.
注意:在一个文件导入前,必须在另一个文件中导出.
Exporting
To export anything from the module we use the export keyword.
使用关键字”export”.
We can export our code using the following ways:
以下两种方式导出代码:
1.命名export(一个模块中导出 0或者多个功能)
2.export default命令(到处一个模块)
下面为代码:
//1.Named export
//a) Exported one by one
const ids = [ 1,2,3,4]; //Not availialble outside this file
export const users = [‘ajax’,’akash’,’raman’];
export const tasks = [‘write article’,’practice’,’read docs’];
/Here ,we are exporting the variable one by one in their declaration,but,we can export them in a single line as:/
//b) Exporting in a single line
const users = [‘ajax’,’akash’,’raman’];
const tasks = [‘write article’,’pratice’,’read docs’];
export {users,tasks};
//2.Default export
//a) exporting with the defination
export default function logUser(user){
Console.log(user);
}
/* OR */
//b) Exporting at the end of the file
function logUser(user){
Console.log(user);
}
export default logUser;
以上为代码.
导入(importing)
用关键字 “import”
在导入时,要注意相对或者绝对路径.
Based on the different types of exports we can have the following types of imports:
对应于不同的导出类型,有不同的导入类型.
1.导入一个或者多个命名为export的模块;
2.导入默认导出模块
下面是不同的导入方式.

从上面我们可以看出,命名为import的语句可以用来导入多个值,用默认(default)的import,只能导入一个值.
从npm包中导入
用如下语句从npm包中导入。

从上面的导入命令，我们可以看出，没有使用相对路径。
以loadash包为例来说明如何导入。

默认情况下，仅仅可以导入javascript文件，但是通过配置，也可以导入CSS或者其他文件。