未定义Javascript es6类

时间:2019-03-10 13:58:20

标签: javascript webpack ecmascript-6 babel-loader

构建项目后,它给了我这个错误,但是在chrome控制台中却给了我以下错误。有人可以帮我吗?我不知道是什么原因造成的。感觉就像我以错误的方式使用了export和class。

节点版本: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(),
  ],
};

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

import Video from './video';
import Overlay from './overlay';

    class Widget {
      ...
    }

    export {Widget as default}

    window.Widget = Widget;

Video和Overlay也是类,并且以与Widget类相同的方式导出。在此之前,它被声明为

  

导出默认类Widget {}

我尝试访问Widget的代码在index.html中,我在script标记内创建了一个新的Widget。

index.html

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

     });

        widget.render();
</script>

0 个答案:

没有答案