为了账号安全,请及时绑定邮箱和手机立即绑定

package.json 里你不注意的细节

说明:

项目包的相关管理、项目的简介以及启动打包方式脚本的配置

项目简介:

  "name": "vue",  "version": "1.0.0",  "description": "麦壳后台管理系统",  "author": "macrolam",  "private": true,

项目依赖

这里分为开发环境下使用的:

"devDependencies": {    "autoprefixer": "^7.1.2",    "babel-core": "^6.22.1",    "babel-helper-vue-jsx-merge-props": "^2.0.3",    "babel-loader": "^7.1.1",    "babel-plugin-syntax-jsx": "^6.18.0",    "babel-plugin-transform-runtime": "^6.22.0",    "babel-plugin-transform-vue-jsx": "^3.5.0",    "babel-preset-env": "^1.3.2",    "babel-preset-stage-2": "^6.22.0",    "chalk": "^2.0.1",    "copy-webpack-plugin": "^4.0.1",    "css-loader": "^0.28.0",    "extract-text-webpack-plugin": "^3.0.0",    "file-loader": "^1.1.4",    "friendly-errors-webpack-plugin": "^1.6.1",    "html-webpack-plugin": "^2.30.1",    "html-withimg-loader": "^0.1.16",    "less": "^2.7.3",    "less-loader": "^4.0.5",
   },

生产环境下使用的:

"devDependencies": {  "dependencies": {    "axios": "^0.17.1",    "element-theme": "^2.0.0",    "element-theme-chalk": "^2.0.2",    "element-ui": "^2.0.2",    "jquery": "^3.2.1",    "vue": "^2.5.2",    "vue-awesome": "^2.3.4",    "vue-axios": "^2.0.2",    "vue-event-calendar": "^1.5.2",    "vue-router": "^3.0.1",    "vuex": "^3.0.1"
  },

具体版本说明相关的查阅:

这里和npm 命令相关的操作是:
npm i 按照这份说明安装所有依赖包

脚本部分

  "scripts": {    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",    "start": "npm run dev",    "build": "node build/build.js"
  },

这里和npm 命令相关的操作是:
npm run 运行 package.json 中预定义的脚本

解释下:
第一句:在当前项目根目录中打开命令行执行:
npm run dev  等同执行了后边的:webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
意思是启动一个服务器并且执行dev下的配置文件,这里也执行了代码的打包压缩,只是放到内存了供你本地服务器上调试开发。所以在dist下是没有的哈。
第二句:
npm run start 等同执行了npm run dev,哈哈其实这个跟第一个一样哈。就是给不同项目过来的伙伴一个惯常操作命令而已。
第三句:
npm run build  等同执行了 node build/build.js
会node的小伙伴肯定知道,这个是使用node 跑一个脚本文件 build.js。
这里是打包命令,文件会放到dist目录下,上线时候打包下丢上去就可以了。

ps:

这里补充下vue-cli搭建的项目中本地服务器知识:

webpack-dev-server主要是启动了一个使用express的Http服务器。它的作用主要是用来伺服资源文件。此外这个Http服务器和client使用了websocket通讯协议,(看网络面板可以发现有websocket的使用不要不知道是哪里来的哈)原始文件作出改动后,webpack-dev-server会实时的编译,但是最后的编译的文件并没有输出到目标文件夹dist

附录

摘自网络上的一张表:
npm 和 yarn 操作不大一样的命令:


webp

image.png


npm 和 yarn 操作一样的命令:


webp

image.png

相关说明

这里摘自网络

什么是npm:

即:npm package manager ,是一种重用其他开发人员的代码的方法,也是一种与他人共享代码的方式,并且可以很容易地管理不同版本的代码。npm 开始作为 Node 包管理器,所以你会发现很多模块可以在服务器端使用。也有很多的包添加命令供您在命令行中使用。你还会发现可以在前端使用的软件包。

什么是yarn:

Yarn 对你的代码来说是一个包管理器, 你可以通过它使用全世界开发者的代码,或者分享自己的代码。 Yarn 做这些快捷、安全、可靠,所以你不用担心什么。通过 Yarn,你可以使用其他开发者针对不同问题的解决方案,使自己的开发过程更简单。 使用过程中遇到问题,你可以将其上报或者贡献解决方案。一旦问题被修复,Yarn会更新保持同步。

Yarn 是 Facebook, Google, Exponent 和 Tilde 开发的一款新的 JavaScript 包管理工具。它并没有试图完全取代 npm。Yarn 同样是一个从 npm 注册源获取模块的新的 CLI 客户端。注册的方式不会有任何变化 —— 你同样可以正常获取与发布包。它存在的目的是解决团队在使用 npm 面临的少数问题。当然,在 Node 版本断更替中,Npm 本身也在积极更新。



作者:麦壳儿UIandFE2
链接:https://www.jianshu.com/p/518e86ffc226


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消