.js和.js.map的檔案是如何產生的，感覺這代碼怪怪的，因為我現在要改后臺，沒接觸過，想了解 vue Npm 和 NodeJS的關系，如果要熟悉.js和.js.map的東西要學習哪些技術，有合適的檔案推薦嗎？
uj5u.com熱心網友回復：
這個目錄結構的東西是什么？用什么工具打開呢？
uj5u.com熱心網友回復：
上面那個沒必要看，用webstorm或者vscode都可以打開，改代碼主要是改src檔案夾下面的東西。uj5u.com熱心網友回復：
.map是方便生產環境代碼壓縮后定位問題的，是打包的時候生成的，nodejs是一個運行環境，npm是管理插件包的工具，vue是前端框架，也是一個npm包，這些目錄應該是你用vue腳手架生成的，用文本編輯器都能打開uj5u.com熱心網友回復：
我現在下載了vscode 打開了，不知道怎么編譯成.map檔案
uj5u.com熱心網友回復：
這是我安裝npm的截圖，但不知道如何運行。
uj5u.com熱心網友回復：
三樓說的很清楚了，從map這個單詞來看，它就是個導航地圖。你可以這么理解，js檔案壓縮后相當于一個有很多坐標點的檔案，比如經度多少維度多少，直接看很難看懂，而這個map檔案就是一份詳細描述每個點的具體屬性，以及所有點的相對位置uj5u.com熱心網友回復：
我不知道使用修改代碼后如何生成js和.js.map 這樣的檔案uj5u.com熱心網友回復：
如果是用vue-cli建的專案，可以在專案根目錄運行：npm run build對專案進行打包，打包過后的檔案就是這個.map的
uj5u.com熱心網友回復：
我按照這樣執行后 發生錯誤，是不是代碼有問題
uj5u.com熱心網友回復：
0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli 'D:\\Program Files\\nodejs\\node.exe',
1 verbose cli 'D:\\Program Files\\nodejs\\node_global\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'build'
1 verbose cli ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]~prebuild: [email protected]
6 info lifecycle [email protected]~build: [email protected]
7 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~build: PATH: D:\Program Files\nodejs\node_global\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;D:\vuestic-admin-master\node_modules\.bin;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;D:\Program Files\nodejs\;D:\Program Files\nodejs\node_global;C:\Users\song\AppData\Local\Microsoft\WindowsApps;;D:\Users\song\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\song\AppData\Roaming\npm
9 verbose lifecycle [email protected]~build: CWD: D:\vuestic-admin-master
10 silly lifecycle [email protected]~build: Args: [ '/d /s /c', 'vue-cli-service build' ]
11 silly lifecycle [email protected]~build: Returned: code: 1 signal: null
12 info lifecycle [email protected]~build: Failed to exec build script
13 verbose stack Error: [email protected] build: `vue-cli-service build`
13 verbose stack Exit status 1
13 verbose stack at EventEmitter.<anonymous> (D:\Program Files\nodejs\node_global\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:311:20)
13 verbose stack at ChildProcess.<anonymous> (D:\Program Files\nodejs\node_global\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:311:20)
13 verbose stack at maybeClose (internal/child_process.js:1021:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
14 verbose pkgid [email protected]
15 verbose cwd D:\vuestic-admin-master
16 verbose Windows_NT 10.0.17134
17 verbose argv "D:\\Program Files\\nodejs\\node.exe" "D:\\Program Files\\nodejs\\node_global\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
18 verbose node v12.16.1
19 verbose npm v6.14.0
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] build: `vue-cli-service build`
22 error Exit status 1
23 error Failed at the [email protected] build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]
這是錯誤日志檔案
uj5u.com熱心網友回復：
請問是這樣處理的嘛？uj5u.com熱心網友回復：
1.先看你在電腦上安裝node沒，如果沒有，先安裝node2.進入專案根目錄，看看有沒有node_modules檔案夾。如果沒有，在專案根目錄運行：npm install
3.打開package.json檔案，看看有沒有下圖的命令
如果沒有，就自己加上
4.在根目錄運行：npm run build，運行成功后會生成一個新的檔案夾，里面就是打包好的檔案。
uj5u.com熱心網友回復：
你好，非常感謝您的解決，我也按照你的步驟一步步操作的，發現package.json和你的配置有點不同，不知道我的配置是否有問題
{
"name": "vuestic-admin",
"version": "2.0.0",
"private": false,
"description": "Vue.js admin template",
"author": "smartapant <[email protected]>",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"lint:style": "stylelint --fix src/**/*.{vue,htm,html,css,sss,less,scss}",
"inspect": "vue-cli-service inspect > inspect.js",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"@types/jest": "^24.0.11",
"amcharts3": "^3.21.14",
"ammap3": "^3.21.14",
"approximate-number": "^2.0.0",
"asva-executors": "^0.1.22",
"axios": "^0.19.0",
"babel-polyfill": "^6.26.0",
"chart.js": "^2.9.3",
"core-js": "3",
"detect-browser": "^4.8.0",
"element-resize-detector": "^1.1.15",
"epic-spinners": "^1.1.0",
"extend": "3.0.2",
"flag-icon-css": "^3.4.5",
"font-awesome": "^4.7.0",
"google-maps": "^3.3.0",
"ionicons": "^4.6.3",
"leaflet-map": "^0.2.1",
"lodash": "4.17.15",
"medium-editor": "^5.23.3",
"normalize.css": "^8.0.1",
"vee-validate": "^2.2.13",
"vue-chartjs": "^3.4.0",
"vue-color": "^2.7.0",
"vue-epic-bus": "^0.1.2",
"popper.js": "^1.16.0",
"regenerator-runtime": "^0.13.3",
"register-service-worker": "^1.6.2",
"v-tooltip": "^2.0.2",
"vue": "^2.6.10",
"vue-bulma-expanding": "0.0.1",
"vue-clipboard2": "^0.3.1",
"vue-gtm": "^2.2.0",
"vue-router": "^3.1.3",
"vue-yandex-maps": "^0.9.0",
"vuestic-ui": "~0.2.2",
"vuetable-2": "^1.7.5",
"vuex": "^3.1.2",
"vuex-i18n": "^1.13.1",
"vuex-router-sync": "^5.0.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.0.5",
"@vue/cli-plugin-eslint": "^4.0.5",
"@vue/cli-plugin-pwa": "^4.0.5",
"@vue/cli-plugin-unit-jest": "^4.0.5",
"@vue/cli-service": "^4.0.5",
"@vue/eslint-config-standard": "^5.0.0",
"@vue/test-utils": "^1.0.0-beta.29",
"autoprefixer": "^9.7.2",
"babel-eslint": "^10.0.3",
"babel-jest": "^24.9.0",
"eslint": "^6.7.1",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^10.0.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",
"eslint-plugin-vue": "^6.0.1",
"lint-staged": "^9.2.1",
"node-sass": "^4.13.0",
"sass-loader": "^7.3.1",
"sass-resources-loader": "^2.0.1",
"stylelint": "^12.0.0",
"stylelint-config-recommended-scss": "^4.1.0",
"stylelint-config-standard": "^19.0.0",
"stylelint-scss": "^3.13.0",
"stylelint-webpack-plugin": "^1.0.1",
"vue-template-compiler": "^2.6.10"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"gitHooks": {
"pre-commit": "lint-staged"
},
"license": "MIT",
"lint-staged": {
"*.js": [
"vue-cli-service lint",
"git add"
],
"*.vue": [
"vue-cli-service lint",
"eslint --fix",
"stylelint --fix",
"git add"
],
".{htm,html,css,sss,less,scss}": [
"stylelint --fix",
"git add"
]
},
"repository": {
"type": "git",
"url": "https://github.com/epicmaxco/vuestic-admin.git"
}
}
我運行npm run build也報錯了
> [email protected] build D:\vuestic-admin-master
> vue-cli-service build
'git' ????????????????????????е????
?????????????
ERROR Error loading vue.config.js:
ERROR Error: Command failed: git rev-parse HEAD
'git' ????????????????????????е????
?????????????
Error: Command failed: git rev-parse HEAD
'git' ????????????????????????е????
?????????????
at checkExecSyncError (child_process.js:630:11)
at Object.execSync (child_process.js:666:15)
at getLastCommitHash (D:\vuestic-admin-master\vue.config.js:9:41)
at Object.<anonymous> (D:\vuestic-admin-master\vue.config.js:55:32)
at Module._compile (internal/modules/cjs/loader.js:1158:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
at Module.load (internal/modules/cjs/loader.js:1002:32)
at Function.Module._load (internal/modules/cjs/loader.js:901:14)
at Module.require (internal/modules/cjs/loader.js:1044:19)
at require (internal/modules/cjs/helpers.js:77:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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! C:\Users\song\AppData\Roaming\npm-cache\_logs\2020-02-28T07_16_57_205Z-debug.log
C:\Users\song\AppData\Roaming\npm-cache\_logs\2020-02-28T07_16_57_205Z-debug.log 錯誤日志以下
0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli 'D:\\Program Files\\nodejs\\node.exe',
1 verbose cli 'D:\\Program Files\\nodejs\\node_global\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'build'
1 verbose cli ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]~prebuild: [email protected]
6 info lifecycle [email protected]~build: [email protected]
7 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~build: PATH: D:\Program Files\nodejs\node_global\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;D:\vuestic-admin-master\node_modules\.bin;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;D:\Program Files\nodejs\;D:\Program Files\nodejs\node_global;D:\phpStudy\PHPTutorial\php\php-7.1.13-nts;D:\composer;C:\Users\song\AppData\Local\Microsoft\WindowsApps;;D:\Users\song\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\song\AppData\Roaming\npm;C:\Users\song\AppData\Roaming\Composer\vendor\bin
9 verbose lifecycle [email protected]~build: CWD: D:\vuestic-admin-master
10 silly lifecycle [email protected]~build: Args: [ '/d /s /c', 'vue-cli-service build' ]
11 silly lifecycle [email protected]~build: Returned: code: 1 signal: null
12 info lifecycle [email protected]~build: Failed to exec build script
13 verbose stack Error: [email protected] build: `vue-cli-service build`
13 verbose stack Exit status 1
13 verbose stack at EventEmitter.<anonymous> (D:\Program Files\nodejs\node_global\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:311:20)
13 verbose stack at ChildProcess.<anonymous> (D:\Program Files\nodejs\node_global\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:311:20)
13 verbose stack at maybeClose (internal/child_process.js:1021:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
14 verbose pkgid [email protected]
15 verbose cwd D:\vuestic-admin-master
16 verbose Windows_NT 10.0.17134
17 verbose argv "D:\\Program Files\\nodejs\\node.exe" "D:\\Program Files\\nodejs\\node_global\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
18 verbose node v12.16.1
19 verbose npm v6.14.0
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] build: `vue-cli-service build`
22 error Exit status 1
23 error Failed at the [email protected] build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]
才開始學vue，有點啰嗦！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/88262.html
標籤：JavaScript