在使用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版本。那么为什么我遇到这个问题?