最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【未解决】使用react-boilerplate去集成ReactJS-AdminLTE

ReactJS crifan 2299浏览 0评论

折腾:

【已解决】把ReactJS-AdminLTE的页面编译打包成生产环境版本

期间,想要集成ReactJS-AdminLTE并使用,从而能输出生产环境的版本

而之前已经试过了:

【未解决】用create-react-app创建的ReactJS的app中引用ReactJS-AdminLTE

不行,所以去试试其他的boilerplate

先去试试:

【整理】ReactJS+Webpack的项目模板boilerplate

中找到的:

https://github.com/react-boilerplate/react-boilerplate

➜  react-boilerplate git clone –depth=1 https://github.com/react-boilerplate/react-boilerplate.git
Cloning into ‘react-boilerplate’…
remote: Counting objects: 365, done.
remote: Compressing objects: 100% (297/297), done.
remote: Total 365 (delta 58), reused 264 (delta 46), pack-reused 0
Receiving objects: 100% (365/365), 1.87 MiB | 381.00 KiB/s, done.
Resolving deltas: 100% (58/58), done.
➜  react-boilerplate cd react-boilerplate
➜  react-boilerplate git:(master) ll
total 632
-rw-r–r–   1 crifan  staff   2.3K  8 11 19:35 CODE_OF_CONDUCT.md
-rw-r–r–   1 crifan  staff   6.5K  8 11 19:35 Changelog.md
-rw-r–r–   1 crifan  staff   1.1K  8 11 19:35 LICENSE.md
-rw-r–r–   1 crifan  staff    88B  8 11 19:35 MAINTAINERS
-rw-r–r–   1 crifan  staff    10K  8 11 19:35 README.md
drwxr-xr-x  18 crifan  staff   612B  8 11 19:35 app
-rw-r–r–   1 crifan  staff   1.2K  8 11 19:35 appveyor.yml
drwxr-xr-x   7 crifan  staff   238B  8 11 19:35 docs
drwxr-xr-x   9 crifan  staff   306B  8 11 19:35 internals
-rw-r–r–   1 crifan  staff   8.4K  8 11 19:35 package.json
drwxr-xr-x   5 crifan  staff   170B  8 11 19:35 server
-rw-r–r–   1 crifan  staff   266K  8 11 19:35 yarn.lock
➜  react-boilerplate git:(master) pwd
/Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate

结果setup都会出错:

➜  react-boilerplate git:(master) USE_YARN=false npm run setup
> [email protected] presetup /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate
> npm i chalk shelljs
npm notice created a lockfile as package-lock.json. You should commit this file.
added 23 packages in 2.413s
> [email protected] setup /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate
> node ./internals/scripts/setup.js
Cleaning old repository ✓
Installing dependencies. ✓ (This might take a while)
Initialising new repository. ✓
Done!
> [email protected] postsetup /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate
> npm run build:dll
> [email protected] build:dll /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate
> node ./internals/scripts/dependencies.js
module.js:487
    throw err;
    ^
Error: Cannot find module ‘lodash/defaultsDeep’
    at Function.Module._resolveFilename (module.js:485:15)
    at Function.Module._load (module.js:437:25)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate/internals/scripts/dependencies.js:13:18)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build:dll: `node ./internals/scripts/dependencies.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build:dll 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!     /Users/crifan/.npm/_logs/2017-08-11T11_37_09_919Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postsetup: `npm run build:dll`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postsetup 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!     /Users/crifan/.npm/_logs/2017-08-11T11_37_09_942Z-debug.log

对于:

Error: Cannot find module ‘lodash/defaultsDeep’

去安装一下lodash,继续运行,又出现其他错误:

➜  react-boilerplate git:(master) npm install lodash
added 1 package in 2.097s
➜  react-boilerplate git:(master) ✗ USE_YARN=false npm run setup
> [email protected] presetup /Users/crifan/dev/dev_root/daryun/Projects/xxxsourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate
> npm i chalk shelljs
updated 2 packages in 0.951s
> [email protected] setup /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate
> node ./internals/scripts/setup.js
module.js:487
    throw err;
    ^
Error: Cannot find module ‘/Users/crifan/dev/dev_root/daryun/Projects/xxxsourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate/internals/scripts/setup.js’
    at Function.Module._resolveFilename (module.js:485:15)
    at Function.Module._load (module.js:437:25)
    at Function.Module.runMain (module.js:605:10)
    at startup (bootstrap_node.js:158:16)
    at bootstrap_node.js:575:3
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] setup: `node ./internals/scripts/setup.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] setup 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!     /Users/crifan/.npm/_logs/2017-08-11T11_40_21_897Z-debug.log
➜  react-boilerplate git:(master) ✗

是很奇怪的,明明是有的:

https://github.com/react-boilerplate/react-boilerplate/blob/master/internals/scripts/setup.js

但是此处下载到本地却没了setup.js

重新下载试试?

不要加那人说的:

–depth=1

➜  react-boilerplate git clone https://github.com/react-boilerplate/react-boilerplate.git
Cloning into ‘react-boilerplate’…
remote: Counting objects: 8880, done.
remote: Total 8880 (delta 0), reused 0 (delta 0), pack-reused 8879
Receiving objects: 100% (8880/8880), 4.16 MiB | 41.00 KiB/s, done.
Resolving deltas: 100% (5150/5150), done.

然后又是试了一堆,期间也还是各种问题,最后也不知道算不算是正常setup了:

➜  react-boilerplate git:(master) USE_YARN=false npm run setup
> [email protected] presetup /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate
> npm i chalk shelljs
npm notice created a lockfile as package-lock.json. You should commit this file.
added 23 packages in 2.334s
> [email protected] setup /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate
> node ./internals/scripts/setup.js
Cleaning old repository ✓
Installing dependencies. ✓ (This might take a while)
Initialising new repository. ✓
Done!
> [email protected] postsetup /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate
> npm run build:dll
> [email protected] build:dll /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate
> node ./internals/scripts/dependencies.js
module.js:487
    throw err;
    ^
Error: Cannot find module ‘lodash/defaultsDeep’
    at Function.Module._resolveFilename (module.js:485:15)
    at Function.Module._load (module.js:437:25)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate/internals/scripts/dependencies.js:13:18)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build:dll: `node ./internals/scripts/dependencies.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build:dll 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!     /Users/crifan/.npm/_logs/2017-08-11T11_50_10_370Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postsetup: `npm run build:dll`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postsetup 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!     /Users/crifan/.npm/_logs/2017-08-11T11_50_10_399Z-debug.log
➜  react-boilerplate git:(master) npm install
> [email protected] preinstall /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate
> npm run npmcheckversion
> [email protected] npmcheckversion /Users/crifan/dev/dev_root/daryun/xxx/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate
> node ./internals/scripts/npmcheckversion.js
npm WARN deprecated [email protected]: ????  preset-latest accomplishes the same task as babel-preset-env. ????  Please install it with ‘npm install babel-preset-env –save-dev’. ‘{ “presets”: [“latest”] }’ to ‘{ “presets”: [“env”] }’. For more info, please check the docs: http://babeljs.io/docs/plugins/preset-env ????. And let us know how you’re liking Babel at @babeljs on ????
npm WARN deprecated [email protected]: Use uuid module instead
> [email protected] postinstall /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate
> npm run build:dll
> [email protected] build:dll /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate
> node ./internals/scripts/dependencies.js
module.js:487
    throw err;
    ^
Error: Cannot find module ‘lodash/defaultsDeep’
    at Function.Module._resolveFilename (module.js:485:15)
    at Function.Module._load (module.js:437:25)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate/internals/scripts/dependencies.js:13:18)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build:dll: `node ./internals/scripts/dependencies.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build:dll 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!     /Users/crifan/.npm/_logs/2017-08-11T11_50_31_753Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `npm run build:dll`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall 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!     /Users/crifan/.npm/_logs/2017-08-11T11_50_31_816Z-debug.log
➜  react-boilerplate git:(master) npm install lodash
added 1 package in 1.721s
➜  react-boilerplate git:(master) ✗ npm install
> [email protected] preinstall /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate
> npm run npmcheckversion
> [email protected] npmcheckversion /Users/crifan/dev/dev_root/daryun/xxx/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate
> node ./internals/scripts/npmcheckversion.js
npm WARN deprecated [email protected]: ????  preset-latest accomplishes the same task as babel-preset-env. ????  Please install it with ‘npm install babel-preset-env –save-dev’. ‘{ “presets”: [“latest”] }’ to ‘{ “presets”: [“env”] }’. For more info, please check the docs: http://babeljs.io/docs/plugins/preset-env ????. And let us know how you’re liking Babel at @babeljs on ????
npm WARN deprecated [email protected]: Use uuid module instead
> [email protected] postinstall /Users/crifan/dev/dev_root/daryun/ProjectsxxxE/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate
> npm run build:dll
> [email protected] build:dll /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate
> node ./internals/scripts/dependencies.js
Building the Webpack DLL…
/bin/sh: cross-env: command not found
up to date in 11.555s
➜  react-boilerplate git:(master) ✗ npm install cross-env
added 7 packages and removed 1 package in 1.546s
➜  react-boilerplate git:(master) ✗ npm install
> [email protected] preinstall /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate
> npm run npmcheckversion
> [email protected] npmcheckversion /Users/crifan/dev/dev_root/daryun/xxx/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate
> node ./internals/scripts/npmcheckversion.js
npm WARN deprecated [email protected]: ????  preset-latest accomplishes the same task as babel-preset-env. ????  Please install it with ‘npm install babel-preset-env –save-dev’. ‘{ “presets”: [“latest”] }’ to ‘{ “presets”: [“env”] }’. For more info, please check the docs: http://babeljs.io/docs/plugins/preset-env ????. And let us know how you’re liking Babel at @babeljs on ????
npm WARN deprecated [email protected]: Use uuid module instead
> [email protected] postinstall /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate
> npm run build:dll
> [email protected] build:dll /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate
> node ./internals/scripts/dependencies.js
Building the Webpack DLL…
events.js:182
      throw er; // Unhandled ‘error’ event
      ^
Error: spawn webpack ENOENT
    at exports._errnoException (util.js:1026:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:189:19)
    at onErrorNT (internal/child_process.js:366:16)
    at _combinedTickCallback (internal/process/next_tick.js:102:11)
    at process._tickCallback (internal/process/next_tick.js:161:9)
    at Function.Module.runMain (module.js:607:11)
    at startup (bootstrap_node.js:158:16)
    at bootstrap_node.js:575:3
up to date in 11.979s
➜  react-boilerplate git:(master) ✗ npm run start
> [email protected] start /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate
> cross-env NODE_ENV=development node server
module.js:487
    throw err;
    ^
Error: Cannot find module ‘express’
    at Function.Module._resolveFilename (module.js:485:15)
    at Function.Module._load (module.js:437:25)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate/server/index.js:3:17)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `cross-env NODE_ENV=development node server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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!     /Users/crifan/.npm/_logs/2017-08-11T11_52_48_629Z-debug.log

【总结】

总之是:

react-boilerplate连自己的项目,正常的

npm run setup

npm run start

都有问题。所以还是算了,放弃吧。

转载请注明:在路上 » 【未解决】使用react-boilerplate去集成ReactJS-AdminLTE

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
82 queries in 0.191 seconds, using 22.10MB memory