Question

在我的github project中，我在Chrome控制台中收到错误Uncaught ReferenceError: breakpoints is not defined。应该通过breakpoints.min.js解决此问题，但是webpack会以某种方式破坏/处理它。

我认为这与webpack以及我从下载的theme导入静态js文件有关。

breakpoints解决了我是否将原始breakpoints.min.js内容粘贴到chrome控制台中的问题。

这是我的webpack.config.js

const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require("webpack");

module.exports = (env, options) => ({
  optimization: {
    minimizer: [
      new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  entry: {
      './js/app.js': ['./js/app.js'].concat(glob.sync('./vendor/**/*.js'))
  },
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, '../priv/static/js')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: '../css/app.css' }),
    new CopyWebpackPlugin([{ from: 'static/', to: '../' }]),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ]
});

我在webpack调试输出中没有看到任何错误：

Webpack is watching the files…

Hash: e70b0e57a305a5ee940a
Version: webpack 4.4.0
Time: 2890ms
Built at: 5/7/2019 9:08:20 PM
                Asset       Size       Chunks             Chunk Names
       ../css/app.css    113 KiB  ./js/app.js  [emitted]  ./js/app.js
               app.js    351 KiB  ./js/app.js  [emitted]  ./js/app.js
       ../favicon.ico   1.23 KiB               [emitted]
../images/overlay.png   2.74 KiB               [emitted]
  ../images/pic02.jpg   20.2 KiB               [emitted]
../images/phoenix.png   13.6 KiB               [emitted]
  ../images/pic01.jpg   59.5 KiB               [emitted]
     ../images/bg.jpg    396 KiB               [emitted]
  ../images/pic03.jpg   20.2 KiB               [emitted]
  ../images/pic04.jpg   20.3 KiB               [emitted]
  ../images/pic08.jpg   13.1 KiB               [emitted]
  ../images/pic06.jpg   20.6 KiB               [emitted]
  ../images/pic05.jpg   20.7 KiB               [emitted]
  ../images/pic07.jpg   20.7 KiB               [emitted]
  ../images/pic09.jpg   12.7 KiB               [emitted]
        ../robots.txt  202 bytes               [emitted]
   [0] multi ./js/app.js ./vendor/js/breakpoints.min.js ./vendor/js/browser.min.js ./vendor/js/jquery.scrollex.min.js ./vendor/js/jquery.scrolly.min.js ./vendor/js/main.js ./vendor/js/util.js 100 bytes {./js/app.js} [built]
[../deps/phoenix_html/priv/static/phoenix_html.js] 2.21 KiB {./js/app.js} [built]
[./css/app.css] 39 bytes {./js/app.js} [built]
[./js/app.js] 493 bytes {./js/app.js} [built]
[./vendor/js/breakpoints.min.js] 4.25 KiB {./js/app.js} [built]
[./vendor/js/browser.min.js] 2.76 KiB {./js/app.js} [built]
[./vendor/js/jquery.scrollex.min.js] 3.3 KiB {./js/app.js} [built]
[./vendor/js/jquery.scrolly.min.js] 1.25 KiB {./js/app.js} [built]
[./vendor/js/main.js] 4.92 KiB {./js/app.js} [built]
[./vendor/js/util.js] 11.3 KiB {./js/app.js} [built]
    + 6 hidden modules
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!css/app.css:
    [./node_modules/css-loader/dist/cjs.js!./css/app.css] 455 bytes {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/cjs.js!./css/font-awesome.min.css] 32.4 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/cjs.js!./css/main.css] 99.2 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/dist/cjs.js!./css/noscript.css] 1.12 KiB {mini-css-extract-plugin} [built]
        + 1 hidden module

编辑：

如前所述，在第{17行的breakpoints中调用

main.js，从webpack控制台输出中，breakpoints.min.js似乎在main.js之前加载。

Answer 1

尝试此配置：

AntiForgeryConfig.UniqueClaimTypeIdentifier = ClaimTypes.NameIdentifier;

Answer 2

您如何使用var currency = 'usd' // ... var myPrice = priceMap[currency]？
根据报告的错误，听起来有 some 个脚本文件正在尝试使用breakpoints来定义它的文件被加载（并足以运行breakpoints）。

查看右侧的Chrome控制台，以查看出现此错误的行。这是在该定义之前运行的代码。确保直到定义breakpoints的文件完成加载后，代码才能运行。

未捕获的ReferenceError：未定义<something>

2 个答案: