I am looking to develop a vanilla JavaScript project that utilizes npm packages, but I want to do it without using bundlers like Webpack.
Here is a basic structure:
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"
}
}
Challenges Encountered:
1. Opening index.html directly results in a CORS exception due to file not running on the server:
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. Removing "type="module"" from index.html leads to an error:
Uncaught SyntaxError: Cannot use import statement outside a module
3. Attempting to launch a static local server:
npm i -g http-server
http-server
The server has access to all files except for dependencies from node_modules.
Current Question: How can I create a vanilla JavaScript project with npm dependencies and successfully run it without using Webpack or any other bundler?
Webpack can be used if necessary, but I prefer avoiding it for this small test project.
P.S. StackBlitz provides a similar starter template: https://stackblitz.com/edit/js-zt2q49 But how can I set up and run it locally?