2017-02-18 26 views
2

Я пытаюсь использовать node_modules в браузере через WebPack. Я прочитал учебник и начинаю шаги, но застрял.Webpack - Получение модулей узлов В комплект и загрузка в html-файл

Я использовал Webpack для создания bundle.js с WebPack конфигурации ниже и при переходе к моей index.html в браузере Chrome, я получаю ошибку:

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

Какие дополнительные шаги я должен сделать, чтобы заставить браузер rec recnnize потребовать?

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

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

В вашей webpack.config.js вы указали, что вы хотите построить этот пакет для Node.js:

target: 'node', 

И WebPack решили сохранить require звонки, потому что Node.js поддерживает их. Если вы хотите запустить его в браузере, вместо этого вы должны использовать target: 'web'.

+0

Как только я изменю цель в Интернете, она говорит мне: 'global.process' не определено. Есть идеи для этого? – ClickThisNick

+0

Кажется, что «spellchecker» основан на некоторых системных API, таких как Windows 8 Spell Check API (в соответствии с readme github: https://github.com/atom/node-spellchecker); Я не думаю, что это будет работать в браузере, это только для серверной части. – idmitme

+0

Ahh да, я заменил spellchecker на lodash, и он отлично работает! Спасибо! – ClickThisNick