美文网首页
webpack4学习系列(一):package.json相关

webpack4学习系列(一):package.json相关

作者: tracyXia | 来源:发表于2019-06-12 15:36 被阅读0次

    一、package.json属性说明

        name - 包名.
        version - 包的版本号。
        description - 包的描述。
        homepage - 包的官网URL。
        author - 包的作者,它的值是你在https://npmjs.org网站的有效账户名,遵循“账户名<邮件>”的规则,例如:zhangsan <zhangsan@163.com>。
        contributors - 包的其他贡献者。
        dependencies / devDependencies - 生产/开发环境依赖包列表。它们将会被安装在 node_module 目录下。
        repository - 包代码的Repo信息,包括type和URL,type可以是git或svn,URL则是包的Repo地址。
        main - main 字段指定了程序的主入口文件
        keywords - 关键字
        scripts - 指定了运行脚本命令的npm命令行缩写。如 npm start、npm run dev、npm run build等
    

    package.json 中添加中文注释会编译出错

    二、生成package.json文件

    $ npm init
    This utility will walk you through creating a package.json file.
    It only covers the most common items, and tries to guess sensible defaults.
    
    See `npm help json` for definitive documentation on these fields
    and exactly what they do.
    
    Use `npm install <pkg> --save` afterwards to install a package and
    save it as a dependency in the package.json file.
    
    Press ^C at any time to quit.
    name: (node_modules) runoob                   # 模块名
    version: (1.0.0) 
    description: Node.js 测试模块(www.runoob.com)  # 描述
    entry point: (index.js) 
    test command: make test
    git repository: https://github.com/runoob/runoob.git  # Github 地址
    keywords: 
    author: 
    license: (ISC) 
    About to write to ……/node_modules/package.json:      # 生成地址
    
    {
      "name": "runoob",
      "version": "1.0.0",
      "description": "Node.js 测试模块(www.runoob.com)",
      ……
    }
    
    Is this ok? (yes) yes
    

    三、安装package.json的依赖文件

    通过命令 npm install 或 npm install --save -dev 安装依赖,将所需模块安装到node-modules目录下。
    –save-dev表示将安装devDependencies属性里的模块。比如,你写 ES6 代码,如果你想编译成 ES5 发布那么 babel 就是devDependencies。如果你用了jQuery,由于发布之后还是依赖jQuery,所以是dependencies。

    源码如下

    {
      "name": "webpack-app",
      "version": "1.0.0",
      "description": "webpack app description",
      "main": "webpack.config.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server --devtool hot --progress --colors --cate",
        "dev1": "webpack --config webpack.config.js --devtool hot --progress --colors --cate",
        "build": "webpack --config webpack.config_build.js -p  --cate",
        "build:watch": "webpack --config webpack.config_build.js -p --watch --cate"
      },
      "repository": {
        "type": "git",
        "url": ".."
      },
      "author": "luckykun",
      "license": "MIT",
      "devDependencies": {
        "autoprefixer": "^6.4.0",
        "axios": "^0.16.2",
        "babel-cli": "^6.24.1",
        "babel-core": "^5.8.38",
        "babel-loader": "^5.4.2",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-es2016": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "better-scroll": "^1.4.0",
        "canvas2image": "^1.0.5",
        "css-loader": "^0.14.5",
        "dom-to-image": "^2.6.0",
        "eslint": "^4.7.0",
        "eslint-config-airbnb": "^15.1.0",
        "eslint-loader": "^1.9.0",
        "eslint-plugin-import": "^2.7.0",
        "eslint-plugin-jsx-a11y": "^6.0.2",
        "eslint-plugin-react": "^7.3.0",
        "extract-text-webpack-plugin": "~1.0.1",
        "jsx-loader": "^0.13.2",
        "koa": "^2.3.0",
        "koa-body": "^2.3.0",
        "koa-router": "^7.2.1",
        "less": "^2.7.2",
        "less-loader": "^4.1.0",
        "mockjs": "^1.0.1-beta3",
        "node-libs-browser": "^0.5.2",
        "node-sass": "^4.10.0",
        "postcss-loader": "^0.11.0",
        "qrcode.react": "^0.8.0",
        "react-lazyload": "^2.3.0",
        "react-router": "^2.7.0",
        "redux-devtools": "^3.4.0",
        "sass-loader": "^6.0.7",
        "style-loader": "^0.12.4",
        "url-loader": "^0.5.6",
        "vconsole": "^3.2.0",
        "webpack": "^1.9.11",
        "webpack-dev-server": "^1.15.0"
      },
      "dependencies": {
        "canvas2image": "^1.0.5",
        "classnames": "^2.2.5",
        "echarts": "^3.8.5",
        "echarts-for-react": "^2.0.15-beta.0",
        "es6-promise": "^4.1.1",
        "fecha": "^2.3.3",
        "fetch-jsonp": "^1.1.1",
        "file-loader": "^2.0.0",
        "html2canvas": "^1.0.0-alpha.12",
        "isomorphic-fetch": "^2.2.1",
        "material-ui": "^1.0.0-beta.47",
        "qrcode.react": "^0.8.0",
        "rc-animate": "^2.4.4",
        "rc-queue-anim": "^1.2.0",
        "rc-tween-one": "^2.2.7",
        "react": "^15.6.2",
        "react-addons-css-transition-group": "^15.6.2",
        "react-copy-to-clipboard": "^5.0.1",
        "react-countup": "^4.0.0-alpha.6",
        "react-countup-light": "^1.0.4",
        "react-dom": "^15.3.1",
        "react-fastclick": "^3.0.2",
        "react-iscroll": "^1.1.4",
        "react-pull-to-refresh": "^1.1.1",
        "react-pullload": "^1.0.7",
        "react-redux": "^5.0.6",
        "react-scroll": "^1.7.10",
        "react-swipeable-views": "^0.12.8",
        "react-transition-group": "^2.4.0",
        "reactjs-iscroll": "^0.3.2",
        "redux": "^3.7.2",
        "swiper": "^4.4.2",
        "whatwg-fetch": "^2.0.3"
      }
    }
    

    这里的入口文件是webpack配置文件—webpack.config.js

    相关文章

      网友评论

          本文标题:webpack4学习系列(一):package.json相关

          本文链接:https://www.haomeiwen.com/subject/tgylfctx.html