运行 dist 时无法解析模块“babel”答案

【问题标题】：Cant resolve module 'babel' when running dist运行 dist 时无法解析模块“babel”
【发布时间】：2017-03-30 23:09:48
【问题描述】：

我已经在 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;

【问题讨论】：

你有 .babelrc 文件吗？
是的！包含：{“预设”：[“es2015”，“stage-0”，“react”]}

标签： reactjs heroku npm production generator-react-webpack

【解决方案1】：

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

“确保你在 heroku 上设置了 NPM_CONFIG_PRODUCTION=false。没有这个 devDependencies 将不会被安装。构建这个样板需要哪些。

如果你安装了 heroku cli，你可以 heroku config:set NPM_CONFIG_PRODUCTION=false --app your-app-name

否则转到您应用上的设置选项卡并添加配置变量“

这解决了它！

【讨论】：

【解决方案2】：

您能否将您的条目从您的 dist.js 文件更改为：

entry: [
  'babel-polyfill',
  path.join(__dirname, '../src/index')
],

【讨论】：

我这样做了，并且还添加了 babel-polyfill 到依赖项，因为它一开始没有找到它。运行“npm run copy & webpack --env=dist”时运行 =>“copyfiles -f ./src/index.html ./src/favicon.ico ./dist”我收到错误“sh: 1: copyfiles ：未找到”，然后是由此产生的更多错误。就像它在构建生产时无法访问 package.json 中的依赖项一样。