折腾:
【已解决】把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 > react-boilerplate@3.4.0 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 > react-boilerplate@3.4.0 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! > react-boilerplate@3.4.0 postsetup /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate > npm run build:dll > react-boilerplate@3.4.0 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! react-boilerplate@3.4.0 build:dll: `node ./internals/scripts/dependencies.js` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the react-boilerplate@3.4.0 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! react-boilerplate@3.4.0 postsetup: `npm run build:dll` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the react-boilerplate@3.4.0 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 > react-boilerplate@3.4.0 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 > react-boilerplate@3.4.0 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! react-boilerplate@3.4.0 setup: `node ./internals/scripts/setup.js` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the react-boilerplate@3.4.0 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 > react-boilerplate@3.4.0 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 > react-boilerplate@3.4.0 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! > react-boilerplate@3.4.0 postsetup /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate > npm run build:dll > react-boilerplate@3.4.0 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! react-boilerplate@3.4.0 build:dll: `node ./internals/scripts/dependencies.js` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the react-boilerplate@3.4.0 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! react-boilerplate@3.4.0 postsetup: `npm run build:dll` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the react-boilerplate@3.4.0 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 > react-boilerplate@3.4.0 preinstall /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate > npm run npmcheckversion > react-boilerplate@3.4.0 npmcheckversion /Users/crifan/dev/dev_root/daryun/xxx/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate > node ./internals/scripts/npmcheckversion.js npm WARN deprecated babel-preset-latest@6.16.0: ???? 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 node-uuid@1.4.8: Use uuid module instead > react-boilerplate@3.4.0 postinstall /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate > npm run build:dll > react-boilerplate@3.4.0 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! react-boilerplate@3.4.0 build:dll: `node ./internals/scripts/dependencies.js` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the react-boilerplate@3.4.0 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! react-boilerplate@3.4.0 postinstall: `npm run build:dll` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the react-boilerplate@3.4.0 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 > react-boilerplate@3.4.0 preinstall /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate > npm run npmcheckversion > react-boilerplate@3.4.0 npmcheckversion /Users/crifan/dev/dev_root/daryun/xxx/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate > node ./internals/scripts/npmcheckversion.js npm WARN deprecated babel-preset-latest@6.16.0: ???? 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 node-uuid@1.4.8: Use uuid module instead > react-boilerplate@3.4.0 postinstall /Users/crifan/dev/dev_root/daryun/ProjectsxxxE/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate > npm run build:dll > react-boilerplate@3.4.0 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 > react-boilerplate@3.4.0 preinstall /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate > npm run npmcheckversion > react-boilerplate@3.4.0 npmcheckversion /Users/crifan/dev/dev_root/daryun/xxx/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate > node ./internals/scripts/npmcheckversion.js npm WARN deprecated babel-preset-latest@6.16.0: ???? 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 node-uuid@1.4.8: Use uuid module instead > react-boilerplate@3.4.0 postinstall /Users/crifan/dev/dev_root/daryun/Projects/xxx/sourcecode/web/AdminManagement/reference/react-boilerplate/react-boilerplate > npm run build:dll > react-boilerplate@3.4.0 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 > react-boilerplate@3.4.0 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! react-boilerplate@3.4.0 start: `cross-env NODE_ENV=development node server` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the react-boilerplate@3.4.0 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
都有问题。所以还是算了,放弃吧。