【发布时间】：2019-12-10 03:12:16
【问题描述】：
我想创建一个使用 npm 包但没有像 Webpack 这样的捆绑器的 vanilla JS 项目。
例如：
index.html：
<div id="app"></div>
<script src="./index.js" type="module"></script>
index.js：
import { sandbox } from "./sandbox.js";
const appDiv = document.getElementById('app');
appDiv.innerHTML = `<h1>JS Starter</h1>`;
sandbox.run();
sandbox.js：
import { from } from "rxjs";
import { map, filter, reduce } from "rxjs/operators";
export const sandbox = {
run() {
console.clear();
var source = ['1', '1', 'foo', '2', '3', '5', 'bar', '8', '13'];
from(source).pipe(
map(num => parseInt(num)),
filter(num => !isNaN(num)),
reduce((acc, val) => acc + val)
).subscribe(num => console.log(num));
}
}
package.json：
{
"name": "jsblank",
"version": "1.0.0",
"private": true,
"dependencies": {
"rxjs": "^6.5.3"
}
}
我尝试了什么：
1.打开index.html： 由于文件未在服务器上运行，我得到 CORS 异常：
Access to script at 'file:///C:/Projects/jsBlank/index.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
2.从index.html中删除“type="module"”：
Uncaught SyntaxError: Cannot use import statement outside a module
3.启动静态本地服务器：
npm i -g http-server
http-server
它可以访问除来自 node_modules 的依赖项之外的所有文件。
问题：如何创建带有 npm 依赖项的 vanilla js 项目并运行它？
Webpack 可以使用或任何其他捆绑器，但我不希望在小型测试项目中使用它。
P.S. stackblitz 有这样的首发： https://stackblitz.com/edit/js-zt2q49 但是如何在本地创建和运行呢？
【问题讨论】：
-
考虑到您最终将如何一遍又一遍地重新发明轮子，请问为什么？为什么不简单地使用 webpack？
-
@ChrisG 因为 webpack 非常重量级，添加到项目需要时间，删除需要时间，因为依赖项中包含大量文件。除了打包工具（如 Webpack）和在线沙箱之外，你能推荐一些更好的方法吗？
-
由于您将专门使用客户端模块，因此几乎所有这些模块都可以通过 unpkg 或其他 cdn 平台获得。所以只需使用
http-server和cdn 脚本，甚至不需要package.json。 -
@ChrisG，您能否用一些简短的例子以几种不同的方式在回答中描述它？据我了解，unpkg 的使用与“cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.3/rxjs.umd.js”之类的简单直接 CDN 不同，不仅在链接文本中？
-
如果一个库仅在 npm 上但适合在浏览器中使用，或者没有 CDN 空间，您可以使用 unpkg 在页面中仅包含 dist/...min.js 文件。不太确定我应该在答案中添加什么，我们还必须编辑您的问题以适应它。现在没时间。
标签： javascript npm ecmascript-6