2017-02-18 11 views
2

WebPack経由でブラウザにnode_modulesを使用しようとしています。私はチュートリアルと最初のステップを読んだが、立ち往生している。Webpack - ノードモジュールを束ねてhtmlファイルにロードする

私は以下のWebPACKの設定でbundle.jsを生成するためのWebPACKを使用していると、Chromeブラウザで私のindex.htmlに行くときに私はエラーを取得する:

Uncaught ReferenceError: require is not defined at Object.<anonymous> (bundle.js:205)

私がどのような追加のステップを持っています必要なrecongnizeするブラウザを取得するには?

index.htmlを

<script src="bundle.js"></script> 

<button onclick="EntryPoint.check()">Check</button> 

index.js

const SpellChecker = require('spellchecker'); 

module.exports = { 
     check: function() { 
      alert(SpellChecker.isMisspelled('keng')); 
     } 
}; 

package.json

{ 
    "name": "browser-spelling", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "dependencies": { 
    "node-loader": "^0.6.0", 
    "spellchecker": "^3.3.1", 
    "webpack": "^2.2.1" 
    } 
} 

webpack.config.jsごwebpack.config.jsあなたはNode.jsのために、このバンドルを構築したいことを指定して

module.exports = { 
    entry: './index.js', 
    target: 'node', 
    output: { 
     path: './', 
     filename: 'bundle.js', 
     libraryTarget: 'var', 
     library: 'EntryPoint' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.node$/, 
       loader: 'node-loader' 
      }, 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       loader: 'babel-loader', 
       query: { 
        presets: ['es2015'] 
       } 
      } 
     ] 
    } 
}; 

答えて

2

:なぜならNode.jsの

target: 'node', 

とのWebPACKは、require通話を続けることにしましたそれらをサポートします。ブラウザで実行する場合は、代わりにtarget: 'web'を使用してください。

+0

ターゲットをウェブに変更すると、それは私に言っています: 'global.process'は未定義です。それのための任意のアイデア? – ClickThisNick

+0

スペルチェッカーは、Windows 8 Spell Check API(githubのreadme:https://github.com/atom/node-spellcheckerによる)のようないくつかのシステムAPIに基づいているようです。私はそれがブラウザで動作するとは思わない、それはサーバー側のためだ。 – idmitme

+0

ああ、私はスペルチェッカーをロダシュに置き換え、それは完璧に動作します!ありがとうございました! – ClickThisNick

関連する問題