Paravieweb(一)建立简单的Paraviewweb项目

系统环境：
ubuntu：18.04_64；
node：8.11.4；

建立简单的Paraviewweb项目

Paraviewweb项目是基于node.js的web应用

一、创建一个node.js项目

mkdir PvwWebProject
cd PvwWebProject
npm init

二、安装需要的依赖包

mkdir MyWebProject
 cd MyWebProject
 npm init
 npm install paraviewweb  --save
 npm install kw-web-suite --save-dev
 npm install normalize.css --save-dev
 npm install monologue.js --save-dev

三、新建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,
    host:localhost
  },
};

四、新建index.js，在src文件夹下

import 'normalize.css';

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

const container = document.createElement('div');
document.body.appendChild(container);

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);

五、启动项目

npm run build 
npm start