我一直在阅读this guide on反应,以下段落引起了我的注意。
出于许多技术原因,CommonJS模块(即 npm中的所有内容都不能在浏览器中本地使用。你需要一个 JavaScript“bundler”将这些模块“捆绑”成你的.js文件 可以在您的网页中加入标记。
我的印象是我可以执行类似npm install jquery
的操作,然后在我的index.html
文件中通过节点模块引用此内容,类似于
<script src="node_modules/jquery/dist.jquery.js">
情况不是这样,还是我错了?
答案 0 :(得分:1)
正如您所阅读的指南所述,“捆绑商”的示例包括webpack
/ browserify
/ systemjs
/等。
这些被称为“模块加载器”,它在运行应用程序时基本上将模块加载到浏览器。
这些模块加载器有一个配置文件。
因此,如果您的webpack
是npm install webpack
,则在安装webpack.config.js
之后,您需要拥有module.exports = {
entry: "./app/boot",
output: {
path: __dirname,
filename: "./dist/bundle.js"
},
resolve: {
extensions: ['', '.js', '.ts']
},
module: {
loaders: [
{ test: /\.ts/, loader: ["ts-loader"], exclude: /node_modules/ },
],
preLoaders: [
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ test: /\.js$/, loader: "source-map-loader", exclude: ['node_modules', 'ext-*', 'lib', 'tools'] }
]
},
debug: true,
devtool: 'source-map'
};
,如下所示:
09-08 19:04:30.860 19466-19466/? E/AndroidRuntime: FATAL EXCEPTION: main
Process: com.santossingh.jokeapp.free, PID: 19466
java.lang.RuntimeException: Unable to start activity ComponentInfo{com.santossingh.jokeapp.free/com.santossingh.jokeapp.free.MainActivity}: java.lang.NullPointerException: Attempt to invoke virtual method 'void com.google.android.gms.ads.AdView.loadAd(com.google.android.gms.ads.AdRequest)' on a null object reference
at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2416)
at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2476)
at android.app.ActivityThread.-wrap11(ActivityThread.java)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1344)
at android.os.Handler.dispatchMessage(Handler.java:102)
at android.os.Looper.loop(Looper.java:148)
at android.app.ActivityThread.main(ActivityThread.java:5417)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)
Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'void com.google.android.gms.ads.AdView.loadAd(com.google.android.gms.ads.AdRequest)' on a null object reference
at com.santossingh.jokeapp.free.MainActivity.onCreate(MainActivity.java:62)
at android.app.Activity.performCreate(Activity.java:6237)
at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1107)
at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2369)
at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2476)
at android.app.ActivityThread.-wrap11(ActivityThread.java)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1344)
at android.os.Handler.dispatchMessage(Handler.java:102)
at android.os.Looper.loop(Looper.java:148)
at android.app.ActivityThread.main(ActivityThread.java:5417)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)
09-08 19:04:35.652 837-2192/system_process E/Surface: getSlotFromBufferLocked: unknown buffer: 0xf2cf6c90
09-08 19:04:56.030 837-853/system_process E/BluetoothAdapter: Bluetooth binder is null
09-08 19:06:20.986 837-853/system_process E/BluetoothAdapter: Bluetooth binder is null
09-08 19:07:41.011 837-853/system_process E/BluetoothAdapter: Bluetooth binder is null
09-08 19:09:01.042 837-853/system_process E/BluetoothAdapter: Bluetooth binder is null
09-08 19:10:20.982 837-853/system_process E/BluetoothAdapter: Bluetooth binder is null
09-08 19:11:46.019 837-853/system_process E/BluetoothAdapter: Bluetooth binder is null
09-08 19:13:06.051 837-853/system_process E/BluetoothAdapter: Bluetooth binder is null
09-08 19:14:41.018 837-853/system_process E/BluetoothAdapter: Bluetooth binder is null
09-08 19:16:06.047 837-853/system_process E/BluetoothAdapter: Bluetooth binder is null
答案 1 :(得分:1)
是。你是对的。 Jquery是一个全局模块,而不是commonjs模块。对于使用commonjs模块的其他包,使用import / export语句,您需要像browserify这样的捆绑器将它捆绑到一个捆绑包中才能在浏览器中使用它
答案 2 :(得分:1)
加载jquery库时,它会验证它是由bundleer / loader还是由script标签导入:
( function( global, factory ) {
"use strict";
if ( typeof module === "object" && typeof module.exports === "object" ) {
module.exports = global.document ?
factory( global, true ) :
function( w ) {
if ( !w.document ) {
throw new Error( "jQuery requires a window with a document" );
}
return factory( w );
};
} else {
factory( global ); // export globally
}
} )( typeof window !== "undefined" ? window : this, function( window, noGlobal ) { /** jQuery definition **/ }