无网络包的前端与服务-工作端
You don't need npm and bundler.
You need just a service-worker script.
.js with babel on service-worker.ts and .tsx with typescript on service-workerPut dist/sw.js as /sw.js on your app root.
wget https://raw.githubusercontent.com/mizchi/trans-loader/master/dist/sw.jsRewrite your entry js like below.
Before
After
See working demo
// /your-entry.js
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(
Hello
, document.querySelector(".root"));index.html
sw.js
src/main.js
src/components/App.js// main.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
ReactDOM.render(, document.querySelector(".root"));index.html
sw.js
src/main.js
src/components/App.tsx// main.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
ReactDOM.render(, document.querySelector(".root"));package.json's versionindex.html
sw.js
package.json
src/main.jspackage.json
{
"dependencies": {
"react": "16.4.1",
"react-dom": "16.4.1"
}
}Log
trans-loader: Cache https://dev.jspm.io/[email protected]
trans-loader: Cache https://dev.jspm.io/[email protected]Compile content with babel/typescript by extname
// ...
self.addEventListener("fetch", (event: any) => {
if (event.request.url.indexOf("dev.jspm.io") > -1) {
// cache jspm result
event.respondWith(useCacheOrLoad(event.request));
} else if (event.request.url.indexOf("/src/") > -1) {
// transform
console.log("trans-loader: with-transform", event.request.url);
event.respondWith(respondWithTransform(event.request.url));
}
});Rewrite npm module path to dev.jspm.io. See this code
// before
import React from "react";
// after
import React from "https://dev.jspm.io/react";.js, .mjs, .ts, .tsx, /index.js, /index.ts, /index.tsxMIT
暂无开放 Issues，或尚未同步最近议题。