2017-10-19 1 views
0

webpack에서 번들로 제공되는 코드베이스의 일부 부분에 대한 서버 렌더링을 설정하려고합니다. 이 번들로 제공되기 전에 내 클라이언트 코드베이스를 구문 분석 할 수 없습니다 노드로 의미가노드 전에 webpack을 실행 하시겠습니까?

(function (exports, require, module, __filename, __dirname) { import React from 'react' 
                   ^^^^^^ 

SyntaxError: Unexpected token import 
    at createScript (vm.js:56:10) 
    at Object.runInThisContext (vm.js:97:10) 
    at Module._compile (module.js:542:28) 
    at Object.Module._extensions..js (module.js:579:10) 
    at Module.load (module.js:487:32) 
    at tryModuleLoad (module.js:446:12) 
    at Function.Module._load (module.js:438:3) 
    at Module.require (module.js:497:17) 
    at require (internal/module.js:20:19) 
    at Object.<anonymous> (./server/index.js:3:67) 

: 물론 지금으로 실행하지만 난, 명시 적 서버와 설정 경로를 가지고있다. 그래서이 문제를 해결하는 가장 좋은 방법은 무엇입니까?

현재 내가 플러그인과 alieses의 톤, 그리고 .babelrc 파일 설치 프로그램이 웹팩 구성 할 필요가

+0

당신이 뭔가 잘못했는지, 아니면 노드 설정에 뭔가 빠졌는지 확인하기 위해 체크 아웃하는 이유는 무엇입니까? https://github.com/babel/example-node-server – Maru

답변

0

로, 웹팩 (3)를 사용하고 있습니다. 하나는 클라이언트 코드 용이고 다른 하나는 서버용입니다. 웹 코드에 서버 코드를 설정하는 방법을 설명하는 데는 시간이 걸립니다. 자세한 내용은 https://github.com/catamphetamine/universal-webpack을 확인하십시오. 더 나은 이해를 얻으려면 해당 패키지의 코드를 읽으십시오. 유니버설 (isomorphic) webpack 설정을해야만하는 것보다 더 어렵다고 말할 수 있습니다. 유용 할 수있는 다른 기사와 패키지가 있습니다.

경험을 바탕으로

, 다음은 서버 코드에 대한 웹팩를 설정할 때 고려해야 할 주요 비트입니다 : 체크 아웃 https://github.com/babel/babel/tree/master/experimental/babel-preset-env

:

설정 "대상" "노드"

바벨에 이러한 옵션에 webpack-node-internals 패키지

설정 "노드"를 사용 :

{ 
    console: true, 
    global: true, 
    process: true, 
    Buffer: true, 
    __filename: true, 
    __dirname: true, 
    setImmediate: true 
} 
  • 서버 코드에 webpack dev 서버를 사용하지 마십시오. 파일로 출력 한 다음 해당 파일에서 nodemon을 사용하십시오.

고려해야 할 몇 가지 다른 비트가 있지만 주요 관심사입니다.

관련 문제