使用从npm下载的模块

时间:2016-09-08 23:29:17

标签: javascript node.js npm

我一直在阅读this guide on反应,以下段落引起了我的注意。

  

出于许多技术原因,CommonJS模块(即   npm中的所有内容都不能在浏览器中本地使用。你需要一个   JavaScript“bundler”将这些模块“捆绑”成你的.js文件   可以在您的网页中加入标记。

我的印象是我可以执行类似npm install jquery的操作,然后在我的index.html文件中通过节点模块引用此内容,类似于 <script src="node_modules/jquery/dist.jquery.js">

情况不是这样,还是我错了?

3 个答案:

答案 0 :(得分:1)

正如您所阅读的指南所述,“捆绑商”的示例包括webpack / browserify / systemjs /等。

这些被称为“模块加载器”,它在运行应用程序时基本上将模块加载到浏览器。

这些模块加载器有一个配置文件。

因此,如果您的webpacknpm 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 **/ }