前言
水写了第一篇文章之后,觉得每天都可以学一些东西,做个简单的分享,也可以是挖个坑,挖个方向,以后可以从这个方向入手,学习更多。
希望能够坚持吧: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
接下来就是打包
yarn webpack --config webpack.config.js
于是就会打包出来一个文件(假设打包到dist文件目录下的main.js)
4.运行你的文件
node main.js
你就能看到输出了~
类似下图:
上述的实验代码可以从该仓库得到,这也是笔者的仓库。
三、价值意义
这也是我疑惑的点,经发掘&思考有如下特点:
- 有些库/内容可以直接从cdn拿,不用从你服务器上面下载,页面的加载速度会有所提升
- 你本地的node_modules就不会那么大了——node_modules太大会引起别的问题,但笔者还没有踩过这个坑,如果以后踩到了会给大家展示下~
总结
以上就是今天要分享的内容,本文仅仅简单介绍了import-http的概念和当前的使用解决方案,希望大家可以从此受到启发,也希望从此受益的读者跟我分享下具体解决了什么问题。