2016-04-20 49 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