json-schema-editor-visual安装

环境：centos release 6.8，Python 2.6.6

1、下载、安装nodejs：

在nodejs网站下载对应的二进制版本，https://nodejs.org/en/download/releases/

cd /usr/local
wget https://nodejs.org/download/release/v12.9.0/node-v12.9.0-linux-x64.tar.gz
tar -xvzf node-v12.9.0-linux-x64.tar.gz
#配置环境变量

vim /etc/profile
export NODE_HOME=/usr/local/node-v12.9.0-linux-x64
export PATH=$NODE_HOME/bin:$PATH

source /etc/profile

验证：

$ node -v
node: /usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.14' not found (required by node)
node: /usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.18' not found (required by node)
node: /usr/lib64/libstdc++.so.6: version `CXXABI_1.3.5' not found (required by node)
node: /usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.15' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.17' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.16' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.14' not found (required by node)

#看报错信息是因为没有g++
$ g++ -v
-bash: g++: command not found
$ gcc -v
-bash: gcc: command not found

#安装gcc和g++
yum install gcc-c++

#再次验证：
$ node -v
node: /usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.14' not found (required by node)
node: /usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.18' not found (required by node)
node: /usr/lib64/libstdc++.so.6: version `CXXABI_1.3.5' not found (required by node)
node: /usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.15' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.17' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.16' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.14' not found (required by node)

#看报错信息因该是gcc版本问题，查看gcc、g++版本：
$ g++ --version
g++ (GCC) 4.4.7 20120313 (Red Hat 4.4.7-17)
$ gcc --version
gcc (GCC) 4.4.7 20120313 (Red Hat 4.4.7-17)

注：最新版本的Node.js使用了C++ 11中，而C++ 11需要code>gcc 4.8+才能支持。升级gcc连接：https://blog.csdn.net/liuxiao723846/article/details/84955136

也可以参考：https://itbilu.com/linux/management/NymXRUieg.html

注：安装g++时应该使用yum -y install gcc-c++，安装完g++后，gcc自动就安装好了（我的就是）

一切都搞定后，验证nodejs环境：

# node -v
v12.9.0
# npm -v
6.10.2

2、安装json-schema-editor：

2.1）下载：

cd /usr/local
wget https://github.com/YMFE/json-schema-editor-visual/archive/master.zip
unzip master.zip

#install
cd json-schema-editor-visual-master
$ npm install

注意，在执行npm install 时可能会报错：npm ERR! Error: CERT_UNTRUSTED，解决方法

npm config set strict-ssl false

2.2）启动：

安装完成后，使用npm start启动，可能会遇到如下问题：

1）ykit没安装：

$ npm start

> json-schema-editor-visual@1.1.1 start /usr/local/json-schema-editor-visual-master
> ykit s -p 8082

sh: ykit: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! json-schema-editor-visual@1.1.1 start: `ykit s -p 8082`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the json-schema-editor-visual@1.1.1 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2020-06-11T05_57_30_205Z-debug.log

解决：安装ykit，https://github.com/YMFE/ykit

cd /usr/local
npm install ykit -g

2）执行 npm run build时报错：TypeError: Cannot read property 'properties' of undefined

$ npm run build

> json-schema-editor-visual@1.1.1 build /data/json-schema-edit
> NODE_ENV=production webpack

/data/json-schema-editor-visual-master/node_modules/webpack-cls.js:89
				describe: optionsSchema.definitions.output.properties.path.description,
				                                           ^

TypeError: Cannot read property 'properties' of undefined
    at module.exports (/data/json-schema-editor-visual-master/ack-cli/bin/config-yargs.js:89:48)
    at /data/json-schema-editor-visual-master/node_modules/weback.js:60:27
    at Object.<anonymous> (/data/json-schema-editor-visual-maswebpack-cli/bin/webpack.js:515:3)
    at Module._compile (internal/modules/cjs/loader.js:936:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:947:10)
    at Module.load (internal/modules/cjs/loader.js:790:32)
    at Function.Module._load (internal/modules/cjs/loader.js:703:12)
    at Module.require (internal/modules/cjs/loader.js:830:19)
    at require (internal/modules/cjs/helpers.js:68:18)
    at Object.<anonymous> (/data/json-schema-editor-visual-maswebpack/bin/webpack.js:156:2)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! json-schema-editor-visual@1.1.1 build: `NODE_ENV=production webpack`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the json-schema-editor-visual@1.1.1 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2020-06-24T09_43_52_957Z-debug.log

解决：https://github.com/plotly/dash-component-boilerplate/issues/12

将package.json中devDependencies的webpack和webpack-cli版本升级（"webpack": "^4.20.2",    "webpack-cli": "^3.1.1",），然后重新执行npm install

3）报错2：（一般不会）

# npm start

> json-schema-editor-visual@1.1.1 start /usr/local/node_modules/json-schema-editor-visual
> ykit s -p 8082

[error] Local ykit-config-antd plugin not found，you may need to install it first.
[doc] Visit https://ykit.ymfe.org/plugin/plugin.html for doc.
[ykit] Starting up server, serving at: /usr/local/node_modules/json-schema-editor-visual
[info] Available on: http://127.0.0.1:8082
✔ [21:38:27] 200 GET / ( 13.56KB )
✔ [21:38:27] 200 GET /favicon.ico ( 5.30KB )

解决：https://github.com/YMFE/ykit-config-antd

4）报错3：（一般不会）

Error: Cannot resolve module 'babel-loader' in /usr/local/json-schema-editor-visual-master

解决：https://www.jianshu.com/p/de1391511846

5）最后，执行npm start

$ npm start

> json-schema-editor-visual@1.1.1 start /usr/local/json-schema-editor-visual-master
> ykit s -p 8082

[ykit] Starting up server, serving at: /usr/local/json-schema-editor-visual-master
[info] Available on: http://127.0.0.1:8082
✔ [14:00:33] 200 GET / ( 13.95KB )
✔ [14:00:34] 200 GET /favicon.ico ( 5.30KB )
✔ [14:00:40] 200 GET /index.html 
✔ [14:00:48] Compiled successfully in 7317ms.
✔ [14:00:48] 200 GET /prd/src/index.js ( 4346.09KB )
✔ [14:00:48] 200 GET /prd/src/index.css ( 656.86KB )

访问：http://ip:8082/index.html 即可。猜测：ykit内部也是使用webpack-dev-server启动了一个文件服务器，而且可以检测文件的改动，我们可以直接修改源码，保存后ykit会自动编译。

2.3）编译：

注：使用npm run build 可以编译，将代码放到dist下。这种方式生成的js无法直接放到index.html中使用。

1）使用ykit p -c的方式打包，将生成的index.js和index.css放到./dev/src下。（生成的js可以直接用到index.html中）

$ ykit p -c

---------------------  YKIT EMITTED ASSETS  ---------------------

[ykit] - src/index.js - 4400.05 KB
[ykit] - src/index.css - 656.86 KB
[ykit] - src/index.js.map - 5090.39 KB
[ykit] - src/index.css.map - 24.27 KB
[info] Bundling Finishes in 6s.

2）使用ykit p -m的方式打包，这种方式带有压缩，线上建议使用这种方式，将生成的index.js和index.css放到./prd/src、./prd/_sourcemap/src下（后缀map的文件），直接将./prd/src下的index.js和index.css放到index.html中接口。

最终，将index的html、js、css放到nginx下即可。

2.4）开发环境：

在项目路径下，执行npm start命令，即可启动项目。index.html中的引用使用prd路径，如下：

<link rel="stylesheet" href="./prd/src/index.css" />
<script src="./prd/src/index.js"></script>

这样，即可实现自动编译，热更新。

在 YKit 中，会实现目标目录（默认为 prd）与源目录（默认为 src）的对应。你可以将其理解成 Webpack 配置中的 output.path 和 context，YKit 隐藏了其中的配置细节。

这种说法可能有点抽象，在本地开发过程中，是允许目标目录 prd 并不实际存在的。举例来说，当本地 server 接收到 /prd/script/index.js 的请求，会自动编译 /src/script/index.js 并返回结果，而并不会在 prd 目录下实际生成一个文件。

注：有的时候按照上面方式做了，但热更新仍然不好使，不要着急，我们还可以使用如下命令加强一下：

#项目路径下执行
$ ykit watch
✔ [22:57:42] Compiled successfully in 7176ms.
Emitted assets:
1. prd/src/index.js (4749.87 KB)
2. prd/src/index.css (658.89 KB)
Waiting to compile...

我们可以看到，ykit watch会自动编译原文，然后放到./prd/src下。