我正在使用webpack实现一个ReactJS Web应用程序,我想开始实现一个服务工作者来处理网络调用,以便缓存文件。但是,我发现很难注册服务工作者的javascript文件。 (我应该补充说,当涉及到React和webpack时,我是初学者。)
如果我做对了,webpack会将每个javascript文件合并到一个bundle.js
文件中,这样就很难调用navigator.serviceWorker.register('./sw.js')...
。我尝试了不同的方法,例如serviceworker-webpack-plugin,但没有运气。如果我按照自述文件页面上提供的步骤操作,则会收到一条错误消息Uncaught Error: serviceworker-webpack-plugin: It seems that your are importing "serviceworker-webpack-plugin/lib/runtime" without using the plugin. Makes sure that your webpack configuration is correct.
。
这是我的webpack.config.js
文件:
var webpack = require('webpack');
var path = require('path');
import ServiceWorkerWebpackPlugin from 'serviceworker-webpack-plugin';
module.exports = {
devtool: 'inline-source-map',
entry: [
'webpack-dev-server/client?http://127.0.0.1:8080/',
'webpack/hot/only-dev-server',
'./src/index.js'
],
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
resolve: {
modulesDirectories: ['node_modules', 'src'],
extensions: ['', '.js']
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: ['babel-loader'],
query: {
presets: ['es2015','react']
}
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new ServiceWorkerWebpackPlugin({
entry: path.join(__dirname, 'src/sw.js'),
excludes: [
'**/.*',
'**/*.map',
'*.html',
],
filename: 'sw.js'
})
]
}
注意:我使用create-react-app
命令开始运行。此外,我对服务工作者本身没有任何问题,我有另一个Web应用程序的工作实现。它只是注册它我正在努力。
感谢任何帮助!
答案 0 :(得分:24)
要删除错误,请更改
import ServiceWorkerWebpackPlugin from 'serviceworker-webpack-plugin';
到
var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin');
另请注意,documentation有拼写错误:
plugins: [
new ServiceWorkerWepbackPlugin({
entry: path.join(__dirname, 'src/sw.js'),
}),
],
请注意, Webpack 拼写错误。它应该是 Webpack 而不是 Wepback 。
此外,文档声明要使用以下代码在主JS线程上注册Service Worker:
import runtime from 'serviceworker-webpack-plugin/runtime';
if ('serviceWorker' in navigator) {
const registration = runtime.register();
}
然而,经过仔细检查,似乎运行时目录是错误的。检查 node_modules 文件夹,
似乎 runtime.js 位于 lib 文件夹中。因此,要解决此问题,请更改
import runtime from 'serviceworker-webpack-plugin/runtime';
到
import runtime from 'serviceworker-webpack-plugin/lib/runtime';
一旦我这样做了,我设法在我的开发环境中安装了Service Worker。
我还在学习React + Webpack!还在我的React应用程序中找出正确使用Service Worker的方法。我还向作者通报了文档中这些必要更改的插件。希望它能帮助别人!
答案 1 :(得分:-4)
使用create-react-app创建项目,然后在package.json中进行一些更改,以便在项目中添加服务工作者。
它将指导您如何在项目中设置服务工作者,而您不需要创建自己的Webpack create-react-app命令将自动执行
请访问:https://github.com/jeffposnick/create-react-pwa#adding-in-a-github-deployment-step