Question

我是Web开发的新手，我正在尝试构建ParaViewWeb。

我已经安装了以下软件包：-

$ npm init --yes
$ npm install paraviewweb  --save
$ npm install kw-web-suite --save-dev
$ npm install normalize.css --save-dev
$ npm install monologue.js --save-dev
$ npm install css-loader@2.1.1 --save-dev
$ npm install react --save
$ npm install react-dom --save

我的项目包含以下文件：-

./ package.json

{
  "name": "pvw",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode development",
    "build:debug": "webpack --display-modules",
    "build:release": "webpack --mode production",
    "start": "webpack-dev-server",
    "commit": "git cz",
    "semantic-release": "semantic-release"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "paraviewweb": "^3.2.12",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  },
  "devDependencies": {
    "css-loader": "^2.1.1",
    "kw-web-suite": "^9.0.0",
    "monologue.js": "^0.3.5",
    "normalize.css": "^8.0.1"
  }
}

./ webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const rules = require('./node_modules/paraviewweb/config/webpack.loaders.js');
const plugins = [
    new HtmlWebpackPlugin({
        inject: 'body',
    }),
];

const entry = path.join(__dirname, './src/index.js');
const outputPath = path.join(__dirname, './dist');
const styles = path.resolve('./node_modules/paraviewweb/style');

module.exports = {
    plugins,
    entry,
    output: {
        path: outputPath,
        filename: 'MyWebApp.js',
        libraryTarget: 'umd',
    },
    module: {
        rules: [
            { test: entry, loader: "expose-loader?MyWebApp" },
        ].concat(rules),
    },
    resolve: {
        alias: {
            PVWStyle: styles,
        },
    },
    devServer: {
        contentBase: './dist/',
        port: 9999,
    },
};

./ dist / html.js

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script type="text/javascript" src="MyWebApp.js"></script>
</body>

</html>

我的项目可以编译，但无法在网络浏览器中运行https://kitware.github.io/paraviewweb/examples/中可用的示例。

在这两个示例中，我收到以下错误：-

示例1：复合

./ src / index.js

import 'normalize.css';

import CompositeComponent from 'paraviewweb/src/Component/Native/Composite';
import BGColorComponent from 'paraviewweb/src/Component/Native/BackgroundColor';

const container = document.querySelector('.content');
container.style.position = 'relative';
container.style.width = '100%';
container.style.height = '600px';

const composite = new CompositeComponent();
const green = new BGColorComponent('green');
const red = new BGColorComponent('red');
const blue = new BGColorComponent('blue');
const pink = new BGColorComponent('pink');

composite.addViewport(green);
composite.addViewport(red);
composite.addViewport(blue);
composite.addViewport(pink);

composite.setContainer(container);

错误如下：-

Uncaught TypeError: Cannot read property 'style' of null
    at eval (index.js?./node_modules/babel-loader/lib??ref--18-0:10)
    at Module../node_modules/babel-loader/lib/index.js?!./src/index.js (MyWebApp.js:119)
    at __webpack_require__ (MyWebApp.js:30)
    at Object.eval (index.js-exposed:1)
    at eval (index.js-exposed:2)
    at Object../src/index.js-exposed (MyWebApp.js:570)
    at __webpack_require__ (MyWebApp.js:30)
    at eval (webpack:///multi_(:9999/webpack)-dev-server/client?:2:18)
    at Object.0 (MyWebApp.js:581)
    at __webpack_require__ (MyWebApp.js:30)

示例2：ButtonSelectorWidget

./ src / index.js

import 'normalize.css';

import React from 'react';
import ReactDOM from 'react-dom';

import ButtonSelectorWidget from 'paraviewweb/src/React/Widgets/ButtonSelectorWidget';

const container = document.querySelector('.content');

function process(idx, list) {
    console.log(idx, list);
}

ReactDOM.render(
    React.createElement(ButtonSelectorWidget, {
        list: [{ name: 'Choice A' }, { name: 'Choice B' }, { name: 'Choice C' }],
        onChange: process,
    }),
    container
);

container.style.margin = 0;

错误如下：-

react-dom.development.js:27596 Uncaught Error: Target container is not a DOM element.
    at Object.render (react-dom.development.js:27596)
    at eval (index.js?./node_modules/babel-loader/lib??ref--18-0:19)
    at Module../node_modules/babel-loader/lib/index.js?!./src/index.js (MyWebApp.js:119)
    at __webpack_require__ (MyWebApp.js:30)
    at Object.eval (index.js-exposed:1)
    at eval (index.js-exposed:2)
    at Object../src/index.js-exposed (MyWebApp.js:737)
    at __webpack_require__ (MyWebApp.js:30)
    at eval (webpack:///multi_(:9999/webpack)-dev-server/client?:2:18)
    at Object.0 (MyWebApp.js:748)

参考链接：

https://kitware.github.io/paraviewweb/

ParaViewWeb-即使我严格按照其安装说明进行操作，也无法运行ParaViewWeb文档中提供的示例

0 个答案: