【每日学纪】在 node.js 中使用import-http

妇女节快乐！谢谢妳们！

---

前言

水写了第一篇文章之后，觉得每天都可以学一些东西，做个简单的分享，也可以是挖个坑，挖个方向，以后可以从这个方向入手，学习更多。
希望能够坚持吧:D

为啥是import-http，早上起来刷知乎看到的～

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、import-http 是什么

好了正文开始，import-http 是Deno的一个特性，也就是Linking to third party code
直观一些，
普通Node.js代码中引用第三方库时，
要先：

npm install xxx
# or
yarn add xxx

然后才可以：

const test = require('xxx');
// or
import test from 'xxx';

但是在deno里，你可以直接这样

import React from 'https://unpkg.com/react';
// 然后你就可以开始愉快地使用React了

可是本文说的是node.js，这个特性
Node.js将要支持（也就是现在没有）
那我们要用的话怎么办？

二、使用方法

Node.js不自带的时候，只能依赖轮子了，现有的方案是作为一个插件，用webpack或者rollup打包
本文介绍下在webpack下怎么用
当然你也可以去插件的仓库看看怎么用:D
*注意：本文的webpack版本为^4.29.0

1.下载插件

代码如下（示例）：

yarn add import-http --dev
# or
npm install import-http --save-dev

2.配置你的webpack.config.js

当然你可能不只是用这个文件名，甚至你可能不用webpack，我想别的地方引用插件流程差不了多少

...
const ImportHttpPlugin = require('import-http/webpack');

module.exports = {
	... // webpack的其他内容
	plugins:[
		... // 其他插件
	    new ImportHttpPlugin(),
	]
};

这样就可以了

3.编写并打包你的测试文件

这也是我的入口文件index.js

import Vue from 'https://unpkg.com/vue';

console.log(Vue); // 简简单单输出个Vue

index.js

接下来就是打包

yarn webpack --config webpack.config.js

于是就会打包出来一个文件（假设打包到dist文件目录下的main.js）

4.运行你的文件

node main.js

你就能看到输出了～
类似下图：

输出的截图～

上述的实验代码可以从该仓库得到，这也是笔者的仓库。

---

三、价值意义

这也是我疑惑的点，经发掘&思考有如下特点：

• 有些库/内容可以直接从cdn拿，不用从你服务器上面下载，页面的加载速度会有所提升
• 你本地的node_modules就不会那么大了——node_modules太大会引起别的问题，但笔者还没有踩过这个坑，如果以后踩到了会给大家展示下～

---

总结

以上就是今天要分享的内容，本文仅仅简单介绍了import-http的概念和当前的使用解决方案，希望大家可以从此受到启发，也希望从此受益的读者跟我分享下具体解决了什么问题。