Webpack和firefox 70:导入声明只能出现在模块的顶层

时间:2019-11-16 20:25:31

标签: javascript webpack

在使用webpack的firefox 70上,我正在开发以下HTML / CSS主题(出现问题的分支): https://github.com/ellakcy/admin-theme/tree/dev

并使用以下Webpack配置:

const path = require('path');
const nodeExternals=require('webpack-node-externals');

module.exports = {
    entry: [
       __dirname+"/src/js/panel.js",
    ],
    output: {
      path: __dirname+'/www',
      publicPath: '/',
      filename: 'panel.js'
    },
    devtool: 'sourcemaps',
    module: {
      rules: [
        {
           test: /\.css$/,
           use: [
            'style-loader',
            'css-loader',
           ],
        },
        {
            test: /\.scss$/,
            use: [
              {
                loader:'style-loader',
              },
              // Translates CSS into CommonJS
              {
                loader:'css-loader'
              },
              // Compiles Sass to CSS
              {
                loader:'sass-loader',
                options: {
                  sassOptions:{
                    includePaths: [
                      "src/saas",
                      "node_modules/bootstrap/scss"
                    ]
                  }
                }
              },
            ],
        },
        {
            test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
            use: [
              { 
                loader: 'file-loader',
                options: {
                  name: '[name].[ext]',
                  outputPath: 'fonts/'
               }
              }
            ]
        },
        { 
          test: /\.js$/, 
          exclude: /node_modules/, 
          loader: "babel-loader" 
        }
      ],
    },
    devServer: {
        contentBase: [
          path.join(__dirname, 'src'),
          path.join(__dirname, 'node_modules'),
        ],
        publicPath:  "/",
        compress: true,
        port: 8000
    }
  };

以及以下babel配置:

{
    "presets": ["@babel/preset-env"]
}

使用以下Javascrit:

import {boolVal,getElementFromIdProvidedInDataAttribute} from './modules/utils/utils.js';

import '../saas/panel.scss';

使用以下package.json

{
  "name": "ellakcy_admin",
  "version": "1.0.0",
  "description": "Admin HTML/CSS template using Bootstrap",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server --compress"
  },
  "keywords": [
    "html",
    "css",
    "admin"
  ],
  "author": "Cypriot FOSS Community",
  "license": "GPL",
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.4.1",
    "bootstrap": "^4.3.1",
    "bs-breakpoints": "^1.0.0",
    "jquery": "^3.4.1",
    "jquery-ui-dist": "^1.12.1",
    "lodash": ">=4.17.13",
    "lodash.template": ">=4.5.0",
    "popper.js": "^1.16.0",
    "saas": "^1.0.0",
    "script-loader": "^0.7.2"
  },
  "devDependencies": {
    "@babel/core": "^7.7.2",
    "@babel/preset-env": "^7.7.1",
    "autoprefixer": "^9.7.1",
    "babel-loader": "^8.0.6",
    "clean-css": ">=4.1.11",
    "css-loader": "^3.2.0",
    "extract-loader": "^3.1.0",
    "file-loader": "^4.2.0",
    "node-sass": "^4.13.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0",
    "webpack-node-externals": "^1.7.2"
  }
}

我在Firefox(版本70)上收到以下错误:

SyntaxError: import declarations may only appear at top level of a module

在网页上,我包含如下内容:

    <script type="text/javascript" src="./js/panel.js" type="module"></script>

./js/panel.js上,我使用以下命令:

import {boolVal,getElementFromIdProvidedInDataAttribute} from './modules/utils/utils.js';

因此,在查看ES2015 import doesn't work (even at top-level) in Firefox之后,我已经正确配置了正确的firefox和babel版本。那么为什么我遇到这个问题?

0 个答案:

没有答案