npm工具介绍

1.Parcel

Parcel 是 Web 应用打包工具，适用于经验不同的开发者。它利用多核处理提供了极快的速度，并且不需要任何配置。

这个工具类似于webpack打包工具，但是不需要进行复杂的配置，只需要编写html，然后编写js文件，然后运行就可以打包es6的模块了，而且还提供了热部署的功能，修改了js代码，可以自动的部署和更新。这样就可以编写简单的es6的模块和html了。

问题

(1) Uncaught SyntaxError: expected expression, got ‘.’
使用import进行css导入的时候，在浏览器端查看，就会出现语法错误

1

import '../css/index.css';

【解决方法】
主要原因其实是因为我从openlayer管网复制的代码有问题，多了下面的两行,其中的 Pointer events 这一行删掉就可以了，不知道为什么，难道是因为不支持注解吗？

1
2

<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
<script src="https://unpkg.com/elm-pep"></script>

2.pnpm

pnpm据说是有更好的效率，能节约磁盘的容量，这个工具要试一试，但是使用过程中，还是出现了各种问题。

1
2
3
4
5
6

## npm安装
npm install -g pnpm
## mac安装
brew install pnpm
## 查看全局安装
pnpm list 

问题

(1) ERR_PNPM_TARBALL_INTEGRITY 
我安装pnpm的时候，倒是非常的顺利.

(2) GET https://registry.npmmirror.com/echarts/download/echarts-5.2.1.tgz error (-3). Will retry in 10 seconds. 2 retries left
使用pnpm安装插件的时候，总是报错，安装一个echart5.2,总是安装不上报错，看样子是无法下载的问题，我自己手动下载之后，还是无法安装。我设置了.npmrc文件，其中添加了淘宝的镜像源，还是报错。使用yarn 就不会报错。不知道为什么，最后还是放弃了使用pnpm,等以后成熟了在来吧。

(2) .autoreconf: not found
还有其他的问题：

• no nasm (Netwide Assembler) found
• pngquant failed to build, make sure that libpng-dev is installed

把相应的包安装上就可以了

1
2
3

sudo apt-get install autoconf automake libtool
sudo apt install libpng-dev
sudo apt install nasm

(3) 无法加载文件 C:\Program Files\nodejs\pnpm.ps1，因为在此系统上禁止运行脚本

1
2
3
4
5

pnpm : 无法加载文件 C:\Program Files\nodejs\pnpm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.micros
oft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ pnpm -v
+ ~~~~

【解决】

1
2
3
4
5
6

## 1.管理员身份打开终端,显示Restricted（表示状态是禁止的）
get-ExecutionPolicy
## 2.在终端执行：
set-ExecutionPolicy RemoteSigned
## 3.在终端命令执行，查看，显示RemoteSigned
get-ExecutionPolicy，

(4) Unable to find the global bin directory

【解决】

1
2

## 执行,然后重新打开一个终端，vscode需要关闭重新打开
pnpm setup