javascript - 出现错误未知提供者 : e on minified version of angularjs + es6 in webpack

Question

webpack 缩小版的 js 不工作，同时它在未缩小时工作正常。

JavaScript 代码:https://github.com/athimannil/online-booking/blob/webpack/src/index.js

bundle.js:6 Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:unpr] Unknown provider: e
http://errors.angularjs.org/1.6.5/$injector/unpr?p0=e
    at file:///Users/mymac/Work/online-booking/dist/bundle.js:6:571
    at file:///Users/mymac/Work/online-booking/dist/bundle.js:6:20419
    at r (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:19328)
    at a (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:19633)
    at Object.o [as invoke] (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:19854)
    at r (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:18700)
    at file:///Users/mymac/Work/online-booking/dist/bundle.js:6:18839
    at i (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:1003)
    at p (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:18601)
    at dt (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:20616)
http://errors.angularjs.org/1.6.5/$injector/modulerr?p0=myApp&p1=Error%3A%20%5B%24injector%3Aunpr%5D%20Unknown%20provider%3A%20e%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.6.5%2F%24injector%2Funpr%3Fp0%3De%0A%20%20%20%20at%20file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A571%0A%20%20%20%20at%20file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A20419%0A%20%20%20%20at%20r%20(file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A19328)%0A%20%20%20%20at%20a%20(file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A19633)%0A%20%20%20%20at%20Object.o%20%5Bas%20invoke%5D%20(file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A19854)%0A%20%20%20%20at%20r%20(file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A18700)%0A%20%20%20%20at%20file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A18839%0A%20%20%20%20at%20i%20(file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A1003)%0A%20%20%20%20at%20p%20(file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A18601)%0A%20%20%20%20at%20dt%20(file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A20616)
    at file:///Users/mymac/Work/online-booking/dist/bundle.js:6:571
    at file:///Users/mymac/Work/online-booking/dist/bundle.js:6:20419
    at r (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:19328)
    at a (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:19633)
    at Object.o [as invoke] (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:19854)
    at r (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:18700)
    at file:///Users/mymac/Work/online-booking/dist/bundle.js:6:18839
    at i (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:1003)
    at p (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:18601)
    at dt (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:20616)
http://errors.angularjs.org/1.6.5/$injector/modulerr?p0=myApp&p1=Error%3A%20%5B%24injector%3Aunpr%5D%20Unknown%20provider%3A%20e%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.6.5%2F%24injector%2Funpr%3Fp0%3De%0A%20%20%20%20at%20file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A571%0A%20%20%20%20at%20file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A20419%0A%20%20%20%20at%20r%20(file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A19328)%0A%20%20%20%20at%20a%20(file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A19633)%0A%20%20%20%20at%20Object.o%20%5Bas%20invoke%5D%20(file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A19854)%0A%20%20%20%20at%20r%20(file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A18700)%0A%20%20%20%20at%20file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A18839%0A%20%20%20%20at%20i%20(file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A1003)%0A%20%20%20%20at%20p%20(file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A18601)%0A%20%20%20%20at%20dt%20(file%3A%2F%2F%2FUsers%2Fmymac%2FWork%2Fonline-booking%2Fdist%2Fbundle.js%3A6%3A20616)
    at file:///Users/mymac/Work/online-booking/dist/bundle.js:6:571
    at file:///Users/mymac/Work/online-booking/dist/bundle.js:6:19045
    at i (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:1003)
    at p (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:18601)
    at dt (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:20616)
    at a (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:8678)
    at de (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:8991)
    at le (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:8234)
    at file:///Users/mymac/Work/online-booking/dist/bundle.js:6:175866
    at HTMLDocument.n (file:///Users/mymac/Work/online-booking/dist/bundle.js:6:15780)
(anonymous) @ bundle.js:6
(anonymous) @ bundle.js:6
i @ bundle.js:6
p @ bundle.js:6
dt @ bundle.js:6
a @ bundle.js:6
de @ bundle.js:6
le @ bundle.js:6
(anonymous) @ bundle.js:6
n @ bundle.js:6

webpack.config.js

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

const bootstrapEntryPoints = require('./webpack.bootstrap.config');

const extractPlugin = new ExtractTextPlugin({
  filename: '[name].css'
});
const DIST_DIR = path.resolve(__dirname, 'dist');
const SRC_DIR = path.resolve(__dirname, 'src');

const config = {
  // entry: [SRC_DIR + '/index.js'],
  entry: [SRC_DIR + '/index.js',bootstrapEntryPoints.dev],
  output: {
    path: DIST_DIR,
    filename: 'bundle.js'
    // publicPath: '/app/'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?/,
        exclude: /node_modules/,
        include: SRC_DIR,
        loader: 'babel-loader',
        query:{
          presets: ['es2015', 'stage-2']
        }
      },
      {
        test: /\.scss$/,
        use: extractPlugin.extract({
          use: [
            {
              loader: 'css-loader',
            },
            {
              loader: 'postcss-loader',
              options: {
                plugins: (loader) => [
                  require('autoprefixer')({
                    browsers: ['last 2 version']
                  }),
                  require('postcss-flexbugs-fixes')(),
                  require('css-mqpacker')
                ]
              }
            },
            {
              loader: 'sass-loader',
            }
          ]
        })
      },
      {
        test: /\.html$/,
        use: ['html-loader']
      },
      {
        test: /\.(jpeg|png)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              // outputPath: 'img/',
              publicPath: 'img/'
            }
          }
        ]
      },
      // { test: /\.(woff2?|svg)$/, loader: 'url-loader?limit=10000' },
      { test: /\.(woff2?|svg)$/, use: 'url-loader?limit=10000&name=fonts/[name].[ext]' },
      // { test: /\.(ttf|eot)$/, loader: 'file-loader' },
      { test: /\.(ttf|eot)$/, use: 'file-loader?name=fonts/[name].[ext]' },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
            }
          }
        ],
        exclude: path.resolve(__dirname, 'src/index.html')
      }
    ]
  },
  plugins:[
    new UglifyJSPlugin({
      mangle: {
        except: ['$super', '$', 'exports', 'require', 'angular'],
      }
    }),
    extractPlugin,
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/index.html'
    }),
    new CleanWebpackPlugin(['dist'])
  ]
};

module.exports = config;

package.json

  "scripts": {
    "start": "npm run build",
    "build": "webpack -d && cp src/index.html dist/index.html && webpack-dev-server --content-base src/ --inline --hot --history-api-fallback",
    "build:prod": "webpack -p && cp src/index.html dist/index.html"
  },

Answer 1

这是由于您的依赖项的隐式注释的缩小。

查看第 34 行的代码:

.controller('homeCtrl', ['$scope', 'moment', '$state', 'bookme', 'bookingService', function($scope, moment, $state, bookme, bookingService){

对比第 82 行:

.controller('registerCtrl', function ($scope, moment, $stateParams, $state, bookme, scheduleService) {

当发生缩小时，它会尝试重命名所有参数以占用更少的空间。然而，在第 34 行，字符串数组将允许 AngularJS 理解依赖项，即使在参数已重命名后也是如此。

问题出在第 82 行，一旦参数被重命名，就不可能知道您的依赖项是什么。

您的缩小过程已重命名您的依赖项(例如，它可能已将 $scope 重命名为 e)，现在它不知道 e 是什么。

我可以看到您在 Webpack 中使用了 Babel。 您可以使用名为 babel-plugin-angularjs-annotate 的插件，它会自动添加显式注释。

https://github.com/schmod/babel-plugin-angularjs-annotate