Я новичок в использовании Javascript с Node.Js. В настоящее время я запускаю приложение, основанное на OpenMCT (https://github.com/nasa/openmct), и у меня возникают проблемы с интеграцией скрипта, который будет использоваться в качестве плагина, в файл индекса. html. Когда я запускаю Node.js сервер с npm start, я вижу это, когда проверяю, что мой файл не был найден (ошибка 404 с телеметрическим файлом. js file). Вот мои настройки для файла 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.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;