系统环境:
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