泰岳区块链v5.1————前端基于webpack安装 web3taijs开发实践

JS简单实现TaiyueChain的小Demo

备注：当前基于windows系统，node v8.11.3，npm 5.6.0

泰岳联盟链，提供了一个对外开放的npm包Web3tai.js，该包保留了web3原有接口的情况下，增加了兼容TaiyueChain主网的设置和新的接口。
地址：https://www.npmjs.com/package/taiweb3js

1、初始化npm项目，使其可安装npm包

mkdir tai-web3-webpack-cli
cd tai-web3-webpack-cli
npm init 

输出（tai-web3-webpack-cli 下文件目录）：
package.json

补充： cd tai-web3-webpack-cli 切换小技巧， tai-w + tab 键盘等可以快速补充后续关键字。

$ cd t + Tab键 => cd tai
$ cd tai-w + Tab键 => cd tai-web3
$ cd tai-web3-w + Tab键 => cd tai-web3-webpack
$ cd tai-web3-webpack-c + Tab键 =>  cd tai-web3-webpack-cli

2、安装webpack、vue、vue-loader 依赖包

作用：使项目可以通过webpack加载.vue文件，并将这些文件编译成浏览器可识别的js文件

cd tai-web3-webpack-cli
cd npm i webpack vue vue-loader --save-dev

输出结果：

注意： npm WARN vue-loader@15.9.2 requires a peer of css-loader@* but none is installed. You must install peer dependencies yourself.
提示vue-loader必须安装css-loader

继续：

npm i css-loader --save-dev

输出结果：

3、创建vue源文件

=》 目录截图：

app.vue源码：

<template>
	<div class="app-page">
		 <input type="text" v-model.trim="name"/>
		 <p class="css-info">{{ name }}{{ msg}}</p>
	</div>
</template>
<script>
	export default {
		name: "app.vue",
		data() {
			return {
				name: '',
				msg: '您好呀，继续努力呢！'
			}
		}
	}
</script>
<style scoped>
.app-page {}
.css-info {
	color: hotpink;
}
</style>

4、配置webpack支持

=》 A、创建main.js 执行文件

import Vue from 'vue';
import App from './app.vue'

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

new Vue({
	render: (h) => h(App)
}).$mount(rootApp);

=》 B、创建webpack.config.js 设置文件

const path = require("path");

module.exports = {
	entry: path.join(__dirname, 'src/main.js'),
	output: {
		filename: "bundle.js",
		path: path.join(__dirname, 'dist')
	}
};

=》 C、修改package.json 添加 npm run build 执行命令

{
  "name": "tai-web3-webpack-cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.5.3",
    "vue": "^2.6.11",
    "vue-loader": "^15.9.2",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  }
}

=》 D、试验编译效果

npm run build

输出结果：

说明：
1、执行时提示需要安装 webpack-cli包，确定安装即可
2、在webpack.config.js种配置mode，以便设置 webpack 使用相应环境的内置优化。

继续执行 npm run build ，结果如图：

说明：
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
在webpack.config.js中添加 module配置项

webpack.config.js 添加mode、module配置项后源码

const path = require("path");
// 配置 vue-loader的伴生VueLoaderPlugin
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
	entry: path.join(__dirname, 'src/main.js'),
	output: {
		filename: "bundle.js",
		path: path.join(__dirname, 'dist')
	},
	mode: 'none',
	module: {
		rules: [
			{
				test: /.vue$/,
				loader: 'vue-loader'
			}
		]
	},
	plugins: [
		new VueLoaderPlugin()
	]
};

继续执行 npm run build ，结果如图：

说明：
Module Error (from ./node_modules/vue-loader/lib/index.js):
[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
安装vue-template-compiler

npm i vue-template-compiler --save-dev

执行完成后，再次npm run build编译，结果如图：

安装style-loader依赖包

npm i style-loader --save-dev

依然如上错误，修改webpack.config.js配置文件添加 style-loader、css-loader处理
webpack.config.js源码如下：

const path = require("path");
// 配置 vue-loader的伴生VueLoaderPlugin
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
	entry: path.join(__dirname, 'src/main.js'),
	output: {
		filename: "bundle.js",
		path: path.join(__dirname, 'dist')
	},
	mode: 'none',
	module: {
		rules: [
			{
				test: /.vue$/,
				loader: 'vue-loader'
			},
			{
				test: /.css$/,
				use: [
					'style-loader',
					'css-loader'
				]
			}
		]
	},
	plugins: [
		new VueLoaderPlugin()
	]
};

执行npm run build结果如下：

查看项目目录下是否生成了dist文件，此时目录结构如图：

5、添加webpack开发环境的启动命令

npm i webpack-dev-server --save-dev

执行npm run build结果如下：

执行npm run dev结果如下：

页面打开效果如：