代码之家 › 专栏 › 技术社区 › Matt

uglifyjs抛出错误:无法将未定义或空值转换为对象

uglifyjs webpack javascript

Matt · 技术社区 · 8 年前

我试过上一个网页包版本,但是当我使用 UglifyJsPlugin , 我得到错误:

无法将未定义或空值转换为对象

app.min.js中的错误来自uglifyjs typeerror:无法转换未定义或空到对象在 定义器 () ast_dot.eval[作为评估](eval at(…/node_modules/uglify js webpack plugin/node_modules/uglify es/tools/node.js:21:1), :99 60:67) ast_dot.eval[作为评估](eval at(…/node_modules/uglify js webpack plugin/node_modules/uglify es/tools/node.js:21:1), ) 在eval(eval at(…/node_modules/uglify js webpack plugin/node_modules/uglify es/tools/node.js:21:1)时, 13531:23) ast_dot.eval[作为优化](eval at(…/node_modules/uglify js webpack plugin/node_modules/uglify es/tools/node.js:21:1), 7677∶23) 在compressor.before(eval at(…/node-modules/uglify js-webpack-plugin/node-modules/uglify-es/tools/node.js:21:1)处, 7660:24) ast_dot.eval[转换](eval at(…/node_modules/uglify js webpack plugin/node_modules/uglify es/tools/node.js:21:1), :45 70:35) 在eval(eval at(…/node_modules/uglify js webpack plugin/node_modules/uglify es/tools/node.js:21:1)时, :468 7:43) 在compressor.before(eval at(…/node-modules/uglify js-webpack-plugin/node-modules/uglify-es/tools/node.js:21:1)处, 7655∶9) ast_call.eval[作为转换](eval at(…/node_modules/uglify js webpack plugin/node_modules/uglify es/tools/node.js:21:1), :45 70:35) 在eval(eval at(…/node_modules/uglify js webpack plugin/node_modules/uglify es/tools/node.js:21:1)时, :45 98:31) 在compressor.before(eval at(…/node-modules/uglify js-webpack-plugin/node-modules/uglify-es/tools/node.js:21:1)处, 7655∶9) ast_simplestatement.eval[作为转换](eval at(…/node_modules/uglify js webpack plugin/node_modules/uglify es/tools/node.js:21:1), :45 70:35) 在eval(eval at(…/node_modules/uglify js webpack plugin/node_modules/uglify es/tools/node.js:21:1)时, :45 86:25) 在doit(eval at(…/node_modules/uglify js webpack plugin/node_modules/uglify es/tools/node.js:21:1)中, 130:23) 在地图上(eval at(…/node_modules/uglify js webpack plugin/node_modules/uglify es/tools/node.js:21:1)。 156:52) 在do_列表(eval at(…/node_modules/uglify js webpack plugin/node_modules/uglify es/tools/node.js:21:1)中, :45 85∶16) 在eval(eval at(…/node_modules/uglify js webpack plugin/node_modules/uglify es/tools/node.js:21:1)时, :468秒25) 在compressor.before(eval at(…/node-modules/uglify js-webpack-plugin/node-modules/uglify-es/tools/node.js:21:1)处, 7655∶9) ast_function.eval[转换](eval at(…/node_modules/uglify js webpack plugin/node_modules/uglify es/tools/node.js:21:1), :45 70:35) 在eval(eval at(…/node_modules/uglify js webpack plugin/node_modules/uglify es/tools/node.js:21:1)时, :45 86:25) 在doit(eval at(…/node_modules/uglify js webpack plugin/node_modules/uglify es/tools/node.js:21:1)中, 130:23) 在地图上(eval at(…/node_modules/uglify js webpack plugin/node_modules/uglify es/tools/node.js:21:1)。 156:52) 在do_列表(eval at(…/node_modules/uglify js webpack plugin/node_modules/uglify es/tools/node.js:21:1)中, :45 85∶16) 在eval(eval at(…/node_modules/uglify js webpack plugin/node_modules/uglify es/tools/node.js:21:1)时, 4688∶21) 在compressor.before(eval at(…/node-modules/uglify js-webpack-plugin/node-modules/uglify-es/tools/node.js:21:1)处, 7655∶9) ast_call.eval[作为转换](eval at(…/node_modules/uglify js webpack plugin/node_modules/uglify es/tools/node.js:21:1), :45 70:35) 在eval(eval at(…/node_modules/uglify js webpack plugin/node_modules/uglify es/tools/node.js:21:1)时, :47 13:43) 在compressor.before(eval at(…/node-modules/uglify js-webpack-plugin/node-modules/uglify-es/tools/node.js:21:1)处, 7655∶9) ast_unaryPrefix.eval[转换](eval at(…/node_modules/uglifyJS网页包插件/node_modules/uglify es/tools/node.js:21:1), :45 70:35) 在eval(eval at(…/node_modules/uglify js webpack plugin/node_modules/uglify es/tools/node.js:21:1)时, 47 18:33) 在compressor.before(eval at(…/node-modules/uglify js-webpack-plugin/node-modules/uglify-es/tools/node.js:21:1)处, 7655∶9) ast_binary.eval[作为转换](eval at(…/node_modules/uglify js webpack plugin/node_modules/uglify es/tools/node.js:21:1), :45 70:35) 在eval(eval at(…/node_modules/uglify js webpack plugin/node_modules/uglify es/tools/node.js:21:1)时, 47 18:33) 在compressor.before(eval at(…/node-modules/uglify js-webpack-plugin/node-modules/uglify-es/tools/node.js:21:1)处, 7655∶9) ast_assign.eval[转换](eval at(…/node_modules/uglify js webpack plugin/node_modules/uglify es/tools/node.js:21:1), :4570:35)“index.html”的子HTML网页包插件: 1资产 entrypoint undefined=索引.html [0]。/node_modules/html网页包插件/lib/loader.js!/索引模板.ejs 651字节{0}[已生成] [2](webpack)/buildin/global.js 489字节{0}[已生成] [3](webpack)/buildin/module.js 497字节{0}[已生成] +1个隐藏模块NPM错误!代码无效循环NPM错误!错误2 NPM错误!霓虹灯@0.0.0产品: webpack -p NPM错误!退出状态2 NPM错误! NPM错误!neon@0.0.0 prod脚本失败。NPM错误!这是可能NPM没有问题。可能还有其他日志记录以上输出。

NPM错误!此运行的完整日志可以在:npm err!
…/.npm/_日志/2018-06-12t10_12_21_278z-debug.log

webpack.config.js文件

const webpack = require('webpack');
const webpackMerge = require('webpack-merge');
const path = require('path');
const WebpackNotifierPlugin = require('webpack-notifier');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const TARGET = process.env.npm_lifecycle_event;
console.log(`target event is ${TARGET}`);

let outputFileName = 'app';
outputFileName += TARGET === 'prod' ? '.min.js' : '.js';

const common = {
  entry: ['babel-polyfill', './index.jsx'],
  output: {
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.js[x]?$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  plugins: [
    new webpack.ProvidePlugin({
      jQuery: 'jquery',
      $: 'jquery',
      jquery: 'jquery',
      'window.jQuery': 'jquery',
    }),
    new WebpackNotifierPlugin(),
  ],
  resolve: {
    modules: [
      path.resolve('.'),
      path.resolve('script'),
      path.resolve('script', 'views'),
      'node_modules',
    ],
    extensions: ['.js', '.jsx', '.json'],
  },
};

if (TARGET === 'prod' || !TARGET) {
  module.exports = webpackMerge(common, {
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: outputFileName,
    },
    module: {
      rules: [
        {
          test: /\.scss$/,
          loaders: [
            'style-loader',
            'css-loader',
            {
              loader: 'postcss-loader',
              options: {
                config: {
                  path: 'postcss.config.js',
                },
              },
            },
            'sass-loader',
          ],
        },
        {
          test: /\.less$/,
          loaders: ['style-loader', 'css-loader', 'less-loader'],
        },
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader'],
        },
        {
          test: /\.(eot|ttf|svg|gif|png|jpg|otf|woff|woff2)$/,
          loader: 'file-loader',
        },
      ],
    },
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          uglifyOptions: {
            parallel: true,
            compress: {
              warnings: false, // Suppress uglification warnings
              pure_getters: true,
              unsafe: true,
              unsafe_comps: true,
              conditionals: true,
              unused: true,
              comparisons: true,
              sequences: true,
              dead_code: true,
              evaluate: true,
              if_return: true,
              join_vars: true,
            },
            output: {
              comments: false,
            },
            exclude: [/\.min\.js$/gi], // skip pre-minified libs
          },
        }),
      ],
    },
    plugins: [
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify('production'),
      }),
      new HtmlWebpackPlugin({
        title: 'test-project',
        template: 'index-template.ejs',
      }),
      new webpack.optimize.AggressiveMergingPlugin(),
      new webpack.optimize.OccurrenceOrderPlugin(),
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      new CompressionPlugin({
        asset: '[path].gz[query]',
        algorithm: 'gzip',
        test: /\.js$|\.css$|\.html$/,
        threshold: 10240,
        minRatio: 0,
      }),
    ],
  });
}

包装袋

"dependencies": {
    "axios": "^0.18.0",
    "bignumber.js": "^7.2.1",
    "bootstrap": "^4.1.1",
    "classnames": "^2.2.5",
    "font-awesome": "^4.7.0",
    "jquery": "^3.3.1",
    "koa": "^2.5.1",
    "koa-send": "^4.1.3",
    "koa-static": "^4.0.3",
    "lodash": "^4.17.10",
    "moment": "^2.22.1",
    "popper.js": "^1.14.3",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-redux": "^5.0.7",
    "react-slidedown": "^1.3.0",
    "react-toastify": "^4.1.0",
    "redux": "^4.0.0",
    "redux-saga": "^0.16.0"
  },
  "devDependencies": {
    "autoprefixer": "^8.4.1",
    "babel": "^6.23.0",
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-async-to-generator": "^6.24.1",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "compression-webpack-plugin": "^1.1.11",
    "css-loader": "^0.28.11",
    "duplicate-package-checker-webpack-plugin": "^3.0.0",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-import": "^2.11.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.7.0",
    "file-loader": "^1.1.11",
    "friendly-errors-webpack-plugin": "^1.7.0",
    "html-webpack-plugin": "^3.2.0",
    "http-server": "^0.11.1",
    "less": "^3.0.2",
    "less-loader": "^4.1.0",
    "node-sass": "^4.9.0",
    "nodemon": "^1.17.5",
    "npm-install-webpack-plugin": "^4.0.5",
    "postcss": "^6.0.22",
    "postcss-loader": "^2.1.4",
    "redux-devtools-extension": "^2.13.2",
    "sass-loader": "^7.0.1",
    "sass-resources-loader": "^1.3.3",
    "style-loader": "^0.21.0",
    "uglifyjs-webpack-plugin": "^1.2.5",
    "url-loader": "^1.0.1",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.1.2",
    "webpack-dev-server": "^3.1.4",
    "webpack-merge": "^4.1.2",
    "webpack-notifier": "^1.6.0"
  }

项目结构:

project
âââ script
â   âââ actions
â   âââ components
â   âââ constants
â   âââ sagas
â   âââ state
â   âââ utils
â   âââ views
â   âââ server.js
âââ postcss.config.js
âââ index.html
âââ index.jsx
âââ postcss.config.js
âââ webpack.config.js

2 回复 | 直到 8 年前

Rishabh Mishra 8 年前

去除 pure_getters 或通行证 纯吸气剂 作为“严格”

pure-getters(默认值:“strict”)——如果您为此传递true,那么uglifyjs将假定对象属性访问(例如foo.bar或foo[“bar”])没有任何副作用。指定“strict”仅当foo确定不抛出(即不为空或未定义)时,才将foo.bar视为无副作用。

https://github.com/mishoo/UglifyJS2/tree/harmony#compress-options

Matt 8 年前

我感动 exclude 选项和它的工作原理:

new UglifyJsPlugin({
        uglifyOptions: {
          compress: {
            warnings: false, // Suppress uglification warnings
            unsafe: true,
            unsafe_comps: true,
            conditionals: true,
            unused: true,
            comparisons: true,
            sequences: true,
            dead_code: true,
            evaluate: true,
            if_return: true,
            join_vars: true,
          },
          output: {
            comments: false,
          },
        },
        exclude: [/\.min\.js$/gi], // skip pre-minified libs
      }),