webpack（持续更新）

拼搏现实的明天。 2023-07-17 14:19 33阅读 0赞

### 说在前面 ###

#### `npm`和`npx`的区别 ####

##### `npm`：包管理器 #####

##### `npx`：包执行器 #####

##### 1. `npm` #####

>  *  `npm`本身实际上不能运行任何包的，如果想要运行哪个包，必须要在`package.json`中定义。
>  *  使用本地安装（`npm install 包名`），则会将包安装到当前目录下的`node_modules`下，且该包只能在该项目下使用。如果使用全局安装（`npm install 包名 -g`），则会将包安装到`/AppData/npm`下，该方式安装的包可以在任何地方使用。
>  *  使用本地安装的包不能直接通过包名去执行包，只有全局安装的包才可以只用包名去执行。如果要去执行包的话，必须要写该包对应的绝对路径/相对路径。
>  *  如果想要通过包名执行去执行本地安装的包，可以通过编辑`package.json`文件，将以下脚本添加到`script`属性下，然后通过`npm run ***（==在scripts中配置的包名==）`去执行包。

"执行命令": "包名" 
     //eg
     "some": "some-package"  
     //调用
     npm run some

##### 2. `npx` #####

>  *  旨在提高从`npm`注册表使用软件包的体验。`npm`使得软件包非常容易地安装和管理托管在注册表上的依赖项。`npm`极大地提升了我们安装和管理包依赖的体验，在`npm`的基础之上，`npx`让`npm`包中的命令行工具和其他可执行文件在使用上变得更加简单。它极大地简化了我们之前使用纯粹的`npm`所需要的大量步骤。
>  *  `npx`会检查命令（即包名）是否出现在`$PATH`或者本地项目中，如果有就去执行，如果没有会去安装。故若想要执行本地安装的包，只需要`npx 包名`即可。

//使用`create-react-app`创建一个`react`项目
    
    //原始方法
    npm install -g create-react-app
    create-react-app my-app
    
    //npx方式
    //临时安装create-react-app包，命令完成后create-react-app会删掉，在下一次使用时还是会重新安装
    npx create-react-app my-app

###### 主要特点 ######

>  *  临时安装可执行依赖包，不用全局安装，不用担心长期的污染。
>  *  可以执行依赖包中的命令，安装完成自动运行
>  *  自动加载node\_modules中依赖包，不用指定具体包所在路径
>  *  可以指定node版本、命令的版本，解决不同项目使用不同版本的命令的问题。