我是Ionic的新手。我已经用超级模板开始了项目。但是当我尝试在浏览器中运行应用程序时。它抛出一个错误说:
ReferenceError: webpackJsonp is not defined
at http://localhost:8100/build/main.js:1:1
我已经尝试将vendor.js放在index.html中但是没有用。
这是index.html文件。我删除了vendor.js,因为它不起作用。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4e8ef7">
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="build/main.css" rel="stylesheet">
</head>
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
</html>
答案 0 :(得分:108)
字面上只是和你一样经历过同样的事情。我在 /src/index.html 中的main.js之前添加了vendor.js脚本 - 现在它在本地运行。
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<script src="build/vendor.js"></script>
<!-- The bundle js is generated during the build process -->
<script src="build/main.js"></script>
答案 1 :(得分:55)
这是Ionic-App-Scripts的一个重大变化
https://github.com/ionic-team/ionic-app-scripts/releases/tag/v2.0.0
必须修改src / index.html以包含新的供应商脚本标记。
...
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<script src="cordova.js"></script>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- all code from node_modules directory is here -->
<script src="build/vendor.js"></script>
<!-- The bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
...
答案 2 :(得分:17)
在vendor.js
< your application directory > /src/index.html
路径
<script src="build/vendor.js"></script>
同时在< your application directory >/src/service-worker.js
文件中进行更改 - 在vendor.js
部分中加入precache
:
// pre-cache our key assets
self.toolbox.precache(
[
'./build/main.js',
'./build/vendor.js', // <=== Add vendor.js
'./build/main.css',
'./build/polyfills.js',
'index.html',
'manifest.json'
]
);
答案 3 :(得分:14)
当我开始用离子3开发旧的离子2项目时,我面临同样的问题。
按照这个步骤适合我。
opne src\index.html
把这一行
<script src="build/vendor.js"></script>
之前
<script src="build/main.js"></script>
之后
<script src="build/polyfills.js"></script>
像这样
<!DOCTYPE html>
...
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app>
</ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<script src="build/vendor.js"></script> <---- here
<!-- The bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
</html>
答案 4 :(得分:0)
离子版本问题兄弟。
检查版本。
npm install -g ionic@v3.0.1
npm install -g ionic@v2.0.1
npm install -g ionic@v1
答案 5 :(得分:0)
&
或
npm install -g ionic@v3.0.1
答案 6 :(得分:0)
当我遇到这个错误时,我正在一个ReactJs项目上。这可能是因为package.json
文件中缺少相关性而导致的错误最终以OP报告的错误形式冒出。在我们的案例中,缺少对omitJs npm软件包的引用。我在package.json
文件的“依赖项”部分中添加以下内容的那一刻,一切开始起作用:
"dependencies": {
.....other dependencies
"omit.js": "1.0.0"
}
答案 7 :(得分:0)
我只是遇到了这个问题,在我的情况下,polyfills / vendor / main文件的顺序并不需要做任何事情,但这只是vendor.js文件的大小。
我意识到它是因为它可以在我的本地计算机上运行,因此,我确实发现vendor.js为5MB,因此,我使用--prod参数再次构建了该应用程序:
ionic cordova build ios --prod