Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/webpack/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
未定义Javascript es6类_Javascript_Webpack_Ecmascript 6_Babel Loader - Fatal编程技术网

未定义Javascript es6类

未定义Javascript es6类,javascript,webpack,ecmascript-6,babel-loader,Javascript,Webpack,Ecmascript 6,Babel Loader,在构建我的项目后,它给了我这个错误,但在chrome的控制台中,它给了我以下错误。有人能帮我吗?我不知道这是什么原因。感觉好像我用错了导出和类 节点版本:v11.6.0 Npm版本:4.6.1 webpack.config.js const path = require('path'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const ExtractTextPlugin = require('extract-text

在构建我的项目后,它给了我这个错误,但在chrome的控制台中,它给了我以下错误。有人能帮我吗?我不知道这是什么原因。感觉好像我用错了导出和类

节点版本:v11.6.0 Npm版本:4.6.1

webpack.config.js

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const autoprefixer = require('autoprefixer');
const webpack = require('webpack');

module.exports = {

  entry:
  {
    widget: ['./src/js/widget/v1/widget.js', './src/sass/widget/widget.scss'],
    website: ['./src/sass/website/website.scss', './src/js/website/website.js']
  },
  output: {
    path: path.resolve(__dirname, 'static'),
    filename: '[name]/[name].js',
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        enforce: 'pre',
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015'],
        },
      },
      {
        test: /\.(css|scss)$/,
        loaders: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader?minimize!sass-loader'],
        }),
      },
      {
        test: /\.(scss)$/,
        loader: "sass-loader", // compiles Sass to CSS
        options: {
          data:  "$HOST-URL: '" + "localhost:8000" + "';"
        }
      },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=image/svg+xml' },
      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=application/font-woff' },
      { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=application/font-woff' },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=application/octet-stream' },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader' },
    ],
  },
  stats: {
    colors: true,
  },
  devtool: 'source-map',
  plugins: [
    new webpack.DefinePlugin({
      HOST_URL: "localhost:8000"
    }),
    new CopyWebpackPlugin([
      { from: './node_modules/font-awesome/fonts/', to: './assets/fonts/' },
      { from: './src/widget/', to: './widget/' },
      { from: './src/website/', to: './website/' },
    ]),
    new StyleLintPlugin(),
    new ExtractTextPlugin({
      filename: '[name]/css/[name].css',
      allChunks: true,
    }),

    new UglifyJSPlugin(),
  ],
};
import Video from './video';
import Overlay from './overlay';

    class Widget {
      ...
    }

    export {Widget as default}

    window.Widget = Widget;
package.json

{
  "name": "name",
  "version": "0.0.1",
  "main": "index.js",
  "author": "author",
  "license": "MIT",
  "devDependencies": {
    "autoprefixer": "^6.7.7",
    "babel-core": "^6.26.3",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^6.4.0",
    "babel-preset-es2015": "^6.22.0",
    "css-loader": "^0.26.4",
    "eslint": "^3.17.1",
    "eslint-config-airbnb": "^14.1.0",
    "eslint-loader": "^1.6.3",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^4.0.0",
    "eslint-plugin-react": "^6.10.0",
    "file-loader": "^0.10.1",
    "http-server": "^0.11.1",
    "node-sass": "^4.9.2",
    "postcss-loader": "^1.3.3",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.13.2",
    "stylelint-config-standard": "^16.0.0",
    "stylelint-webpack-plugin": "^0.7.0",
    "uglifyjs-webpack-plugin": "^0.3.0",
    "webpack": "^2.7.0",
    "webpack-shell-plugin": "^0.5.0"
  },
  "scripts": {
    "babel": "babel --presets es2015 js/main.js -o build/main.bundle.js",
    "webpack": "webpack",
    "watch": "webpack --watch"
  },
  "dependencies": {
    "bootstrap": "^4.0.0",
    "bootstrap-datepicker": "^1.6.4",
    "bootstrap-sass": "^3.3.7",
    "copy-webpack-plugin": "^4.5.2",
    "extract-text-webpack-plugin": "^2.1.0",
    "font-awesome": "^4.7.0",
    "formdata-polyfill": "^3.0.9",
    "jquery": "^3.2.1",
    "popper.js": "^1.12.9"
  }
}
widget.js

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const autoprefixer = require('autoprefixer');
const webpack = require('webpack');

module.exports = {

  entry:
  {
    widget: ['./src/js/widget/v1/widget.js', './src/sass/widget/widget.scss'],
    website: ['./src/sass/website/website.scss', './src/js/website/website.js']
  },
  output: {
    path: path.resolve(__dirname, 'static'),
    filename: '[name]/[name].js',
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        enforce: 'pre',
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015'],
        },
      },
      {
        test: /\.(css|scss)$/,
        loaders: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader?minimize!sass-loader'],
        }),
      },
      {
        test: /\.(scss)$/,
        loader: "sass-loader", // compiles Sass to CSS
        options: {
          data:  "$HOST-URL: '" + "localhost:8000" + "';"
        }
      },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=image/svg+xml' },
      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=application/font-woff' },
      { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=application/font-woff' },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=application/octet-stream' },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader' },
    ],
  },
  stats: {
    colors: true,
  },
  devtool: 'source-map',
  plugins: [
    new webpack.DefinePlugin({
      HOST_URL: "localhost:8000"
    }),
    new CopyWebpackPlugin([
      { from: './node_modules/font-awesome/fonts/', to: './assets/fonts/' },
      { from: './src/widget/', to: './widget/' },
      { from: './src/website/', to: './website/' },
    ]),
    new StyleLintPlugin(),
    new ExtractTextPlugin({
      filename: '[name]/css/[name].css',
      allChunks: true,
    }),

    new UglifyJSPlugin(),
  ],
};
import Video from './video';
import Overlay from './overlay';

    class Widget {
      ...
    }

    export {Widget as default}

    window.Widget = Widget;
视频和覆盖也是类,并以与小部件类相同的方式导出。在此之前,它被宣布为

导出默认类小部件{}

我试图访问小部件的代码位于index.html中,我在脚本标记内创建了一个新的小部件

index.html

<script type="text/javascript">
    var widget = new Widget({

     });

        widget.render();
</script>

var小部件=新小部件({
});
widget.render();

错误日志在哪里?小部件的导入位置在哪里?您是否了解widget是否在全球范围内可用?通常使用全局作用域是错误的做法错误日志在哪里?小部件的导入位置在哪里?您是否了解widget是否在全球范围内可用?通常使用全局范围是不好的做法吗