写一个loader发布到npm上然后使用它

614 阅读1分钟

本次以 markdown-loader 为例进行说明: (这个 loader 是专门用来解析 .md 文件的。有兴趣的您可以按照我说的步骤看看效果。) webpack 的 loader 就是一个函数,所以创建一个项目以后,步骤如下: 项目的目录:

image.png

项目里面最主要的文件就是: package.json 和 markdown-loader.js 文件。您只要有这个文件,npm 发布就可以使用。我创建 src 就是为了测试用。

1.npm init

image.png

name 就是这个 loader 的名字。(在webpack.config.js 里面就配置这个)。 main 是 npm 导出的入口文件。

2.解析 .md 的文件

markdown-loader.js文件如下:

image.png

3.发布 npm 包

npm publish

此时要确保您的 vscode 已经和 npm 关联好了。

4.使用这个loader

在你的项目里面设置如下:

image.png

5.写个测试案例

创建 mark.md 文件

image.png

6.在js文件里面引入

image.png

7.启动项目

image.png

发布 npm 包的时候,你只需要改你自己的代码和版本号就可以发布了,然后在自己的项目里卖弄重新安装即可。

image.png