【发布时间】：2020-05-04 01:55:27
【问题描述】：
我对在 Node.Js 中使用 Javascript 还是很陌生。我目前正在运行一个基于 OpenMCT(https://github.com/nasa/openmct) 的应用程序，我无法在 index.html 文件中集成一个用作插件的脚本。当我使用 npm start 启动 Node.js 服务器时，我看到当我检查我的文件未找到时（telemetry.js 文件出现 404 错误）。这是我对 index.html 文件和附加脚本的设置（两者都在同一个目录中）。
index.html：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<title></title>
<script src="dist/openmct.js"></script>
<script src="telemetry.js"></script>
<link rel="icon" type="image/png" href="dist/favicons/favicon-96x96.png" sizes="96x96" type="image/x-icon">
<link rel="icon" type="image/png" href="dist/favicons/favicon-32x32.png" sizes="32x32" type="image/x-icon">
<link rel="icon" type="image/png" href="dist/favicons/favicon-16x16.png" sizes="16x16" type="image/x-icon">
</head>
<body>
</body>
<script>
const FIVE_MINUTES = 5 * 60 * 1000;
const THIRTY_MINUTES = 30 * 60 * 1000;
[
'example/eventGenerator'
].forEach(
openmct.legacyRegistry.enable.bind(openmct.legacyRegistry)
);
openmct.install(openmct.plugins.Espresso());
openmct.install(telemetry());
openmct.install(openmct.plugins.MyItems());
openmct.install(openmct.plugins.LocalStorage());
openmct.install(openmct.plugins.Generator());
openmct.install(openmct.plugins.ExampleImagery());
openmct.install(openmct.plugins.UTCTimeSystem());
openmct.install(openmct.plugins.AutoflowView({
type: "telemetry.panel"
}));
openmct.install(openmct.plugins.DisplayLayout({
showAsView: ['summary-widget', 'example.imagery']
}));
openmct.install(openmct.plugins.Conductor({
menuOptions: [
{
name: "Fixed",
timeSystem: 'utc',
bounds: {
start: Date.now() - THIRTY_MINUTES,
end: Date.now()
}
},
{
name: "Realtime",
timeSystem: 'utc',
clock: 'local',
clockOffsets: {
start: - THIRTY_MINUTES,
end: FIVE_MINUTES
}
}
]
}));
openmct.install(openmct.plugins.SummaryWidget());
openmct.install(openmct.plugins.Notebook());
openmct.install(openmct.plugins.LADTable());
openmct.install(openmct.plugins.Filters(['table', 'telemetry.plot.overlay']));
openmct.install(openmct.plugins.ObjectMigration());
openmct.install(openmct.plugins.ClearData(['table', 'telemetry.plot.overlay', 'telemetry.plot.stacked']));
openmct.install(telemetry());
openmct.start();
</script>
</html>
telemetry.js：
function telemetry() {
return function install() {
console.log("I've been installed!");
}
};
这里是 webpack 的配置：
webpack.config.js：
const path = require('path');
const packageDefinition = require('./package.json');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const devMode = process.env.NODE_ENV !== 'production';
const VueLoaderPlugin = require('vue-loader/lib/plugin');
// TODO: Build Constants w/ git-rev-sync
const gitRevision = require('child_process')
.execSync('git rev-parse HEAD')
.toString().trim();
const gitBranch = require('child_process')
.execSync('git rev-parse --abbrev-ref HEAD')
.toString().trim();
const webpackConfig = {
mode: devMode ? 'development' : 'production',
entry: {
openmct: './openmct.js',
espressoTheme: './src/plugins/themes/espresso-theme.scss',
snowTheme: './src/plugins/themes/snow-theme.scss',
maelstromTheme: './src/plugins/themes/maelstrom-theme.scss'
},
output: {
filename: '[name].js',
library: '[name]',
libraryTarget: 'umd',
path: path.resolve(__dirname, 'dist')
},
resolve: {
alias: {
"@": path.join(__dirname, "src"),
"legacyRegistry": path.join(__dirname, "src/legacyRegistry"),
"saveAs": "file-saver",
"csv": "comma-separated-values",
"EventEmitter": "eventemitter3",
"bourbon": "bourbon.scss",
"vue": path.join(__dirname, "node_modules/vue/dist/vue.js"),
"d3-scale": path.join(__dirname, "node_modules/d3-scale/build/d3-scale.min.js"),
"printj": path.join(__dirname, "node_modules/printj/dist/printj.min.js"),
"styles": path.join(__dirname, "src/styles"),
"MCT": path.join(__dirname, "src/MCT"),
"testTools": path.join(__dirname, "src/testTools.js")
}
},
devtool: devMode ? 'eval-source-map' : 'source-map',
plugins: [
new webpack.DefinePlugin({
__OPENMCT_VERSION__: `'${packageDefinition.version}'`,
__OPENMCT_BUILD_DATE__: `'${new Date()}'`,
__OPENMCT_REVISION__: `'${gitRevision}'`,
__OPENMCT_BUILD_BRANCH__: `'${gitBranch}'`,
__OPENMCT_ROOT_RELATIVE__: `'${devMode ? 'dist/' : ''}'`
}),
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[name].css'
}),
new CopyWebpackPlugin([
{
from: 'src/images/favicons',
to: 'favicons'
},
{
from: './index.html',
transform: function (content) {
return content.toString().replace(/dist\//g, '');
}
}
])
],
module: {
rules: [
{
test: /\.(sc|sa|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'fast-sass-loader'
]
},
{
test: /\.html$/,
use: 'html-loader'
},
{
test: /zepto/,
use: [
"imports-loader?this=>window",
"exports-loader?Zepto"
]
},
{
test: /\.(jpg|jpeg|png|svg|ico|woff2?|eot|ttf)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath(url, resourcePath, context) {
if (/\.(jpg|jpeg|png|svg)$/.test(url)) {
return `images/${url}`
}
if (/\.ico$/.test(url)) {
return `icons/${url}`
}
if (/\.(woff2?|eot|ttf)$/.test(url)) {
return `fonts/${url}`
} else {
return `${url}`;
}
}
}
},
{
test: /\.vue$/,
use: 'vue-loader'
}
]
},
stats: {
modules: false,
timings: true,
colors: true,
warningsFilter: /asset size limit/g
}
};
module.exports = webpackConfig;
【问题讨论】：
-
哪个文件返回 404 状态？
-
仅供参考，
<script>标签应该在<head>或<body>部分中。你的在外面 -
telemetry.js 返回 404 错误。我遵循了他们教程中强调的相同程序，以包含适用于该版本代码的文件 (github.com/nasa/openmct-tutorial)，但由于某种原因不适用于该版本...
-
再次检查您的
telemetry.js文件是否确实存在，与该文件名完全匹配（相同的大小写，没有前导或尾随空格等）并且位于index.html旁边的根文件夹中 -
双重检查仍然给我同样的错误。如果我删除此脚本，页面会正常运行并正确加载其他所有内容。我真的想知道这是否与我的配置有关，但我的 macOS Catalina 和 Ubuntu 18.04 也有同样的问题，所以很可能是代码错误。
标签： javascript html node.js webpack