2016-04-20 77 views
0

我有一些問題,真正理解如何配置webpack與react.js和bootstrap。Webpack與react.js和引導

這裏我的package.json:

{ 
    "name": "gestion-fraude", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "dev": "webpack -d --watch", 
    "build": "webpack -p", 
    "start": "node server.js" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "babel-loader": "^6.2.2", 
    "babel-preset-es2015": "^6.3.13", 
    "babel-preset-react": "^6.3.13", 
    "bootstrap": "^3.3.6", 
    "browserify": "^13.0.0", 
    "canvasjs": "^1.8.1", 
    "express": "^4.13.4", 
    "mysql": "^2.10.2", 
    "node-jsx": "^0.13.3", 
    "react": "^0.14.7", 
    "react-dom": "^0.14.7", 
    "socket.io": "^1.4.5", 
    "socket.io-client": "^1.4.5", 
    "webpack": "^1.12.13" 
    }, 
    "devDependencies": { 
    "autoprefixer-loader": "^3.2.0", 
    "css-loader": "^0.23.1", 
    "expose-loader": "^0.7.1", 
    "file-loader": "^0.8.5", 
    "less": "^2.6.0", 
    "less-loader": "^2.2.2", 
    "postcss-loader": "^0.8.0", 
    "react-hot-loader": "^1.3.0", 
    "style-loader": "^0.13.0", 
    "webpack-dev-server": "^1.14.1" 
    } 
} 

這裏我webpack.config.js:

var webpack = require('webpack'); 
var path = require('path'); 

var BUILD_DIR = path.resolve(__dirname, 'src/client/public'); 
var APP_DIR = path.resolve(__dirname, 'src/client/app'); 

var config = { 
    entry: APP_DIR + '/index.jsx', 
    output: { 
    path: BUILD_DIR, 
    filename: 'bundle.js' 
    }, 
    module : { 
    loaders : [ 
     { 
     test : /\.jsx?/, 
     include : APP_DIR, 
     loader : 'babel' 
     }, 
     {test: /\.html$/, loader: 'raw',exclude: /node_modules|bower_components/}, 
     {test: /\.css$/, loaders: ['style-loader', 'css-loader', 'postcss-loader'], exclude: /node_modules|bower_components/}, 
     {test: /\.less$/, loader: 'style-loader!css-loader!less-loader'}, 
     {test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' }, 
     { 
      test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, 
      loader: 'file-loader', 
     }, 
     {test: /^((?!config).)*\.js?$/, exclude: /node_modules/, loader: 'babel?cacheDirectory'}, 
     {test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/, loader: 'file', exclude: /node_modules|bower_components/}, 
    ] 
    } 
}; 

module.exports = config; 

問題:

在我的本地(WINDWOS機)npm run dev完美的作品。

然而,當我做我的Linux服務器上的同樣的事情,我有這些錯誤消息:

npm run dev 

> [email protected] dev /home/ec2-user/gestion-fraude 
> webpack -d --watch 

Hash: 845d8e1b89804c3eab0b 
Version: webpack 1.12.13 
Time: 4152ms 
     Asset  Size Chunks    Chunk Names 
    bundle.js 1.24 MB  0 [emitted] main 
bundle.js.map 1.41 MB  0 [emitted] main 
    + 224 hidden modules 

ERROR in ./~/css-loader!./~/less-loader!./src/client/style/style.less 
Module build failed: ReferenceError: Promise is not defined 
    at LazyResult.async (/home/ec2-user/gestion-fraude/node_modules/postcss/lib/lazy-result.js:157:31) 
    at LazyResult.then (/home/ec2-user/gestion-fraude/node_modules/postcss/lib/lazy-result.js:79:21) 
    at processCss (/home/ec2-user/gestion-fraude/node_modules/css-loader/lib/processCss.js:198:5) 
    at Object.module.exports (/home/ec2-user/gestion-fraude/node_modules/css-loader/lib/loader.js:24:2) 
@ ./src/client/style/style.less 4:14-128 

ERROR in ./~/css-loader!./~/bootstrap/dist/css/bootstrap.css 
Module build failed: ReferenceError: Promise is not defined 
    at LazyResult.async (/home/ec2-user/gestion-fraude/node_modules/postcss/lib/lazy-result.js:157:31) 
    at LazyResult.then (/home/ec2-user/gestion-fraude/node_modules/postcss/lib/lazy-result.js:79:21) 
    at processCss (/home/ec2-user/gestion-fraude/node_modules/css-loader/lib/processCss.js:198:5) 
    at Object.module.exports (/home/ec2-user/gestion-fraude/node_modules/css-loader/lib/loader.js:24:2) 
@ ./~/style-loader!./~/css-loader!./~/bootstrap/dist/css/bootstrap.css 4:14-73 

任何KHOW如何解決這個對我不太文件被自動編譯到一個css文件?

+0

嘗試安裝的https:// WWW。 npmjs.com/package/promise –

+0

根據[這篇文章](https://github.com/webpack/css-loader/issues/144),你需要'es6-promise'。 – Kujira

+0

我已經npm安裝es6-promise但我有同樣的錯誤:/ – onedkr

回答

0

補救措施是將NodeJS升級到最新版本。 https://github.com/nodesource/distributions#installation-instructions

例如,爲了在Ubuntu更新的NodeJS至7版本:對於大多數Linux發行版,你可以使用官方NodeSource的GitHub的自述文件中提供的腳本做到這一點

curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash - 
sudo apt-get install -y nodejs