Question

我有一些问题要真正了解如何使用react.js和bootstrap配置webpack。

这是我的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;

问题：

在我的localhost（windwos机器）上npm run dev完美无缺。

然而，当我在我的linux服务器上执行相同的操作时，我会收到以下错误消息：

 npm run dev

> gestion-fraude@1.0.0 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

任何人都知道如何解决这个问题，因为我的较少文件被自动编译为css文件？

Answer 1

解决方法是将NodeJS升级到最新版本。对于大多数Linux发行版，您可以使用官方NodeSource的GitHub自述文件中提供的脚本执行此操作：https://github.com/nodesource/distributions#installation-instructions

例如，为了在Ubuntu上将NodeJS更新到版本7：

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

带有react.js和bootstrap的Webpack

1 个答案: