Question

我在generator-react-webpack上构建了我的项目。现在我正在尝试将我的反应应用程序部署到Heroku。在构建依赖项的过程中，我收到一个错误：

npm run copy & webpack --env=dist
remote:        
remote:        Hash: 82c8f499a3f6822a3522
remote:        Version: webpack 1.13.3
remote:        Time: 73ms
remote:        
remote:        ERROR in Entry module not found: Error: Cannot resolve module 'babel' in /tmp/build_a9e8f64bdab19b2486d922d4ba0f3d83

装载机似乎有些奇怪。我试图将'babel'包含在依赖关系中，并试图用'babel-core'替换它，但它没有用。

我对这个问题非常沮丧，如果有人能帮助我，我会很感激。谢谢！

的package.json

{
  "name": "templateApp",
  "private": true,
  "version": "0.0.1",
  "description": "Template application for future builds",
  "main": "",
  "engines": {
    "node": "6.2.2"
  },
  "scripts": {
    "clean": "rimraf dist/*",
    "copy": "copyfiles -f ./src/index.html ./src/favicon.ico ./dist",
    "dist": "npm run copy & webpack --env=dist",
    "lint": "eslint ./src",
    "posttest": "npm run lint",
    "release:major": "npm version major && npm publish && git push --follow-tags",
    "release:minor": "npm version minor && npm publish && git push --follow-tags",
    "release:patch": "npm version patch && npm publish && git push --follow-tags",
    "serve": "node server.js --env=dev",
    "serve:dist": "node server.js --env=dist",
    "dev": "node server.js --env=dev",
    "start": "node server.js --env=dev",
    "test": "karma start",
    "test:watch": "karma start --autoWatch=true --singleRun=false",
    "postinstall": "npm run dist && npm run start"
  },
  "repository": "",
  "keywords": [],
  "author": "Alfred Ödling",
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-eslint": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-polyfill": "^6.3.14",
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-react": "^6.0.15",
    "babel-preset-stage-0": "^6.5.0",
    "bower-webpack-plugin": "^0.1.9",
    "chai": "^3.2.0",
    "copyfiles": "^0.2.1",
    "css-loader": "^0.23.0",
    "eslint": "^2.2.0",
    "eslint-loader": "^1.0.0",
    "eslint-plugin-react": "^5.0.0",
    "file-loader": "^0.8.4",
    "glob": "^7.0.0",
    "isparta-instrumenter-loader": "^1.0.0",
    "karma": "^0.13.9",
    "karma-chai": "^0.1.0",
    "karma-coverage": "^1.0.0",
    "karma-mocha": "^1.0.0",
    "karma-mocha-reporter": "^2.0.0",
    "karma-phantomjs-launcher": "^1.0.0",
    "karma-sourcemap-loader": "^0.3.5",
    "karma-webpack": "^1.7.0",
    "lost": "^7.0.3",
    "minimist": "^1.2.0",
    "mocha": "^2.2.5",
    "node-sass": "^3.4.2",
    "null-loader": "^0.1.1",
    "open": "0.0.5",
    "phantomjs-prebuilt": "^2.0.0",
    "postcss": "^5.0.11",
    "postcss-loader": "^0.8.0",
    "react-addons-test-utils": "^15.0.0",
    "react-hot-loader": "^1.2.9",
    "rimraf": "^2.4.3",
    "rucksack-css": "^0.8.6",
    "sass-loader": "^3.1.2",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.6",
    "webpack": "^1.12.0",
    "webpack-dev-server": "^1.12.0"
  },
  "dependencies": {
    "autoprefixer": "^6.3.7",
    "axios": "^0.13.1",
    "classnames": "^2.2.5",
    "clipboard": "^1.5.12",
    "core-js": "^2.0.0",
    "firebase": "^3.4.1",
    "fixed-data-table": "^0.6.3",
    "flat": "^2.0.1",
    "history": "^3.0.0",
    "lodash": "^4.15.0",
    "lost": "^7.0.3",
    "normalize.css": "^4.0.0",
    "postcss": "^5.1.1",
    "postcss-cli": "^2.5.2",
    "postcss-cssnext": "^2.8.0",
    "postcss-import": "^8.1.2",
    "postcss-loader": "^0.8.2",
    "react": "^15.0.0",
    "react-addons-css-transition-group": "^15.3.0",
    "react-cookie": "^0.4.8",
    "react-datagrid": "^2.1.1",
    "react-dom": "^15.3.1",
    "react-redux": "^4.4.5",
    "react-router": "^2.6.1",
    "react-tooltip": "^3.2.1",
    "redux": "^3.5.2",
    "redux-thunk": "^2.1.0",
    "rucksack-css": "^0.8.6",
    "seamless-immutable": "^6.1.1"
  }
}

dist.js

'use strict';

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

let baseConfig = require('./base');
let defaultSettings = require('./defaults');

// Add needed plugins here
let BowerWebpackPlugin = require('bower-webpack-plugin');

let config = Object.assign({}, baseConfig, {
  entry: path.join(__dirname, '../src/index'),
  cache: false,
  devtool: 'sourcemap',
  plugins: [
    new webpack.optimize.DedupePlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"'
    }),
    new BowerWebpackPlugin({
      searchResolveModulesDirectories: false
    }),
    new webpack.optimize.UglifyJsPlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.AggressiveMergingPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: defaultSettings.getDefaultModules()
});

// Add needed loaders to the defaults here
config.module.loaders.push({
  test: /\.(js|jsx)$/,
  loader: 'babel',
  include: [].concat(
    config.additionalPaths,
    [ path.join(__dirname, '/../src') ]
  )
});

module.exports = config;

Answer 1

来自https://github.com/mxstbr/react-boilerplate/issues/914

“确保在heroku上设置NPM_CONFIG_PRODUCTION = false。如果没有这个devDependencies，将不会安装。这个样板需要构建。

如果你安装了heroku cli，你可以 heroku config：设置NPM_CONFIG_PRODUCTION = false --app your-app-name

否则请转到您应用的“设置”标签，然后添加“配置变量”

这修好了！

Answer 2

您可以将条目从<html> <head> <title>This is My Page's Title</title> </head> <body> <div class="holder"> <div id="left"> left text should have the remaining width and shortended if it is too long lorem ipsum minion dolor </div> <div id="right"> this text is dynamic - should be fully visibile </div> </div> </body> </html>文件更改为：

dist.js

运行dist时无法解析模块'babel'

2 个答案: