2014-12-22 17 views
0

매우 기본적인 node.js/express 서버의 d3-gauge 플러그인을 사용하려고합니다. 나는 표현과 기본 디렉토리 및 파일 트리를 생성하고이 있어야 할 곳 '예'디렉토리에서 파일을 복사 한 :Uncaught ReferenceError : require is not defined - Node.js

. 
├── app.js 
├── bin 
│ └── www 
├── package.json 
├── public 
│ ├── images 
│ ├── javascripts 
│ └── stylesheets 
│  └── style.css 
├── routes 
│ ├── index.js 
│ └── users.js 
└── views 
    ├── error.jade 
    ├── index.jade 
    └── layout.jade 

내가 만든 변경 사항은 다음과 같습니다

내가 주 '복사됩니다. js '는'javascripts '아래에'gauge-main.js '로 표시됩니다.

'stylesheets'아래 'small.css', 'simple.css', 'grayscale.css', 'index.css'를 'gauge-small.css', 'gauge-simple.css'로 복사했습니다. 'gauge-grayscale.css', 'gauge-index.css'를 각각 입력하십시오.

extends layout 

block head 
     meta(charset='utf-8') 
     title Index 
     link(rel='stylesheet', href='/stylesheets/style.css', type='text/css', media='screen', charset='utf-8') 
     link(rel='stylesheet', href='/stylesheets/gauge-index.css', type='text/css', media='screen', charset='utf-8') 
block body 
     script(src='/javascripts/gauge-main.js', type='text/javascript', charset='utf-8') 

및 'layout.jade':

doctype html 
html 
    head 
    block head 
    body 
    block body 

은 예와 일치하는

제가

'index.jade'를 수정.

앱이 실행되면 ('npm start'로 시작) 작동하며 페이지에 액세스하면 404가 생성되지 않습니다. '* .css'파일과 'gauge-main.js'는 모두 올바르게 연결되어 있습니다.

브라우저에 아무 것도 표시되지 않는 것이 문제입니다. 'gauge-main.js'에 문제가 있음을 알 수있는 페이지를 '검사'할 때 'Uncaught ReferenceError : require is not defined'오류가 발생합니다. 이것은 브라우저의 JavaScript가 require를 지원하지 않는다는 사실과 관련이 있습니다. 몇 가지 연구를 한 후이 문제를 해결하는 올바른 방법은 'browserify'라는 확장 프로그램을 사용하는 것입니다. 여기서 문제는 'd3-gauge'플러그인의 작성자가 'browserify'를 사용하여 이런 방식으로 사용하려고하지 않는다고 생각합니다. 저자의 사이트에서 page을 '검사'할 때 '브라우저 인식'의 흔적이 발견되지 않습니다.

아이디어가 있으십니까?

답변

1

package.json을 보면 데모는 beefy입니다. Beefybrowserify과 작동하도록 설계되어 require을 해결합니다.

+0

그래서 nef install beefy와 함께 beefy를 설치해야합니까? 또한, 'package.json'은 무엇입니까? 나는 'beefy'에 대한 어떤 언급도 찾을 수 없다. – dsljanus

+0

beefy는 개발 용으로 괜찮지 만 배포 할 때 소스 코드를 브라우저해야합니다. 여기에서 gauge-main.js – elaijuh

+0

[package.json] (https://github.com/thlorenz/d3-gauge/blob/master) /package.json)'scripts' 속성을 살펴보면'npm run demo'가 시작됩니다. – elaijuh

관련 문제