[vue三部曲]第一部：vue腳手架的搭建和目錄資源介紹，超詳細！

第一步 node環境安裝

1.1 若是本機沒有安裝node運行環境，請下載node 安裝包進行安裝
1.2 若是本機已經安裝node的運行換，請更新至最新的node 版本
下載地址：https://nodejs.org/en/ 或者 http://nodejs.cn/

第二步 node環境檢測

1.2.1 在終端輸入 node -v
若是輸出版本號，說明咱們安裝node 環境成功
隨便咱們能夠查看 npm 的 版本號，安裝node以後是自帶npm的
可使用 npm -v

第三步 vue-cli腳手架安裝

2.1 若是訪問外網比較慢，可使用淘寶的鏡像 https://npm.taobao.org/
打開命令終端 npm install -g cnpm --registry=https://registry.npm.taobao.org
回車以後，我就能夠能夠快樂的用 cnpm 替代 npm
2.2 初始化項目 vue init webpack vue-demo

輸入命令後，會詢問咱們幾個簡單的選項，咱們根據本身的須要進行填寫就能夠了。

 

Project name :項目名稱 ，若是不須要更改直接回車就能夠了。注意：這裏不能使用大寫，因此我把名稱改爲了vueclitest

Project description:項目描述，默認爲A Vue.js project,直接回車，不用編寫。

Author：做者，若是你有配置git的做者，他會讀取。

Install  vue-router? 是否安裝vue的路由插件，咱們這裏須要安裝，因此選擇Y

Use ESLint to lint your code? 是否用ESLint來限制你的代碼錯誤和風格。（這裏的話建議是須要的），輸入y，若是你是大型團隊開發，是必定要進行配置。而後會出現選擇eslint源，這個能夠根據本身的須要進行選擇，後期也能夠本身進行配置。

setup unit tests with  Karma + Mocha? 是否須要安裝單元測試工具Karma+Mocha，咱們這裏不須要，因此輸入n。

Setup e2e tests with Nightwatch?是否安裝e2e來進行用戶行爲模擬測試，咱們這裏不須要，因此輸入n

2.3 進入 cd vue-demo

2.4 執行 npm install

2.5 接下來執行 npm run dev

 

下面的內容是整合，已經獲得了博主的轉載受權

博主：靜靜是小花
博客連接：https://www.cnblogs.com/hongdiandian

 

 

vue-cli腳手架目錄一覽

 

最近在學習vue，看的稀裏糊塗。今天從頭開始，把cli配置的vue項目目錄和配置文件搞清楚。

先看看整個項目目錄結構：

 

再看看build文件夾下相關文件及目錄：

 

config文件夾下目錄和文件：

接下來講說vue-cli項目中頁面相關的主要文件^o^

首先是index.html:

說明：通常只定義一個空的根節點，在main.js裏面定義的實例將掛載在#app節點下，內容經過vue組件填充。

 

 

App.vue文件：

說明：app.vue是項目的主組件，全部頁面都是在app.vue下切換的。一個標準的vue文件，分爲三部分。

第一裝寫html代碼在<template></template>中，通常在此下面只能定義一個根節點；

第二<script></script>標籤；

第三<style scoped></style>用來寫樣式，其中scoped表示。該style做用於只在當前組件的節點及其子節點，可是不包含子組件呦。

<router-view></router-view>是子路由視圖，後面的路由頁面都顯示在此處，至關於一個指示標，指引顯示哪一個頁面。

 

main.js:

說明：入口文件來着，主要做用是初始化vue實例並使用須要的插件。好比下面引用了4個插件，但只用了app（components裏面是引用的插件）。

 

router下面的index.js文件：路由配置文件。

說明：定義了三個路由，分別是路徑爲/，路徑爲/msg，路徑爲/detail。後續會詳細說明，由於我也是才學好多東西不懂，囧。

 

vue-cli腳手架之build文件夾上半部

 

 

好，接下來一塊兒分析分析配置文件^o^。

 

build.js做用：命令npm run build的入口配置文件，主要用於生產環境。

 

build.js中具體含義標註（vue-cli腳手架官方文件解釋，你們可自行定製這裏面的內容）：

 

check-version.js，文件有點點長這裏直接貼代碼：

 1 'use strict' //js嚴格運行模式
 2 const chalk = require('chalk') //導入chalk模塊，const聲明一個常量
 3 const semver = require('semver') //同上
 4 const packageConfig = require('../package.json') //導入package.json文件
 5 const shell = require('shelljs')//shelljs插件，執行unix系統命令
 6 
 7 function exec (cmd) {
 8 //腳本能夠經過child_process模塊新建子進程，從而執行Unix系統命令
 9   return require('child_process').execSync(cmd).toString().trim()//將cmd參數傳遞的值轉換成先後沒有空格的字符串，也就是版本號
10 }
11 //聲明常量數組，數組內容爲有關node相關信息的對象
12 const versionRequirements = [
13   {
14     name: 'node',//對象名稱爲node
15     currentVersion: semver.clean(process.version),//使用semver插件，把版本信息轉換成規定格式
16     versionRequirement: packageConfig.engines.node//規定package.json中engines選項的node版本信息
17   }
18 ]
19 
20 if (shell.which('npm')) {//which爲linux指令，在$path規定的路徑下查找符合條件的文件
21   versionRequirements.push({
22     name: 'npm',
23     currentVersion: exec('npm --version'),//調用npm --version命令，而且把參數返回給exec函數獲取純淨版本
24     versionRequirement: packageConfig.engines.npm//規定package.json中engines選項的node版本信息
25   })
26 }
27 
28 module.exports = function () {
29   const warnings = []
30 
31   for (let i = 0; i < versionRequirements.length; i++) {
32     const mod = versionRequirements[i]
33 　　//若是版本號不符合package.json文件中指定的版本號，就執行warning.push...
34     if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
35       warnings.push(mod.name + ': ' +
36         chalk.red(mod.currentVersion) + ' should be ' +
37         chalk.green(mod.versionRequirement)
38         //當前版本號用紅色標識，要求版本號用綠色標識
39       )
40     }
41   }
42 
43   if (warnings.length) {//若是爲真，則打印提示用戶升級新版本
44     console.log('')
45     console.log(chalk.yellow('To use this template, you must update following to modules:'))
46     console.log()
47 
48     for (let i = 0; i < warnings.length; i++) {
49       const warning = warnings[i]
50       console.log('  ' + warning)
51     }
52 
53     console.log()
54     process.exit(1)
55   }
56 }

 

utils.js仍是須要貼代碼，太長了：

 

'use strict'//js嚴格模式執
const path = require('path')//導入path模
const config = require('../config')//引入config目錄下的index.js配置文件
const ExtractTextPlugin = require('extract-text-webpack-plugin')//一個插件，抽離css樣式，防止將樣式打包在js中引發樣式加載錯亂
const packageConfig = require('../package.json')
//導出assetsPath
exports.assetsPath = function (_path) {
//若是是生產環境，則assetsSubDirectory的值爲index.js文件中的assetsSubDirectory的值，不然...
  const assetsSubDirectory = process.env.NODE_ENV === 'production'
    ? config.build.assetsSubDirectory
    : config.dev.assetsSubDirectory

  return path.posix.join(assetsSubDirectory, _path)//path.join返回絕對路徑（在電腦上的實際位置）；path.posix.join返回相對路徑
}
//cssloaders相關配置
exports.cssLoaders = function (options) {
  options = options || {}

  const cssLoader = {
    loader: 'css-loader',//loader仍是看看webpack官方解釋，處理除js以外的文件？
    options: {//傳遞參數給loader
      sourceMap: options.sourceMap//是否開啓cssmap,默認爲false
    }
  }
//postcss-loader相關
  const postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]//是否使用postCss

    if (loader) {
      loaders.push({
        loader: loader + '-loader',//加載對應loader
        options: Object.assign({}, loaderOptions, {//object.assign淺拷貝合併對象
          sourceMap: options.sourceMap
        })
      })
    }

    // Extract CSS when that option is specified
    //
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
//返回最終讀取和導入loader
  }

  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  return {
    css: generateLoaders(),//css對應vue-style-loader和css-loader
    postcss: generateLoaders(),//postcss對應vue-style-loader和less-loader
    less: generateLoaders('less'),//less對應...(同上）
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
}

// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
  const output = []
  const loaders = exports.cssLoaders(options)
//生成的各類css文件的loader對象
  for (const extension in loaders) {
    const loader = loaders[extension]//提取每一種文件的loader
    output.push({
      test: new RegExp('\\.' + extension + '$'),
      use: loader
    })
  }

  return output
}

exports.createNotifierCallback = () => {
  const notifier = require('node-notifier')//導入模塊，用於node.js模塊發送跨平臺系統通知

  return (severity, errors) => {
    if (severity !== 'error') return

    const error = errors[0]
    const filename = error.file && error.file.split('!').pop()

    notifier.notify({
      title: packageConfig.name,//發生錯誤時的通知標題
      message: severity + ': ' + error.name,
      subtitle: filename || '',
      icon: path.join(__dirname, 'logo.png')//發生錯誤時的通知圖標
    })
  }
}

 

vue-loader.config.js

 

這篇好長啊，先結束了，下一篇再介紹重要的幾個文件：webpack.base.conf.js     webpack.dev.conf.js     webpack.prod.conf.js     webpack.test.conf.js

vue-cli腳手架之webpack.base.conf.js

 

webpack相關的重要配置文件將在這一節給出。webpack水很深啊^o^，在此先弄清楚原配文件內容的含義，後續能夠本身根據實際狀況配置。

 

webpack.base.conf.js:配置vue開發環境的webpack配置，處理各類文件（js啊、css啊、html啊...）

'use strict'//js嚴格模式執行
const path = require('path')//引入node.js路徑模塊
const utils = require('./utils')//引入utils工具模塊，主要處理css-loader和vue-style-loader
const config = require('../config')//引入config文件夾下的index.js文件
const vueLoaderConfig = require('./vue-loader.conf')//引入vue-loader工具模塊

function resolve (dir) {//返回當前目錄的平行目錄的路徑
  return path.join(__dirname, '..', dir)
}

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {//輸入
    app: './src/main.js'//入口文件爲main.js
  },
  output: {//輸出
    path: config.build.assetsRoot,//打包後文件輸出路徑，看看本身的index.js中build配置中的assetsRoot是啥目錄
    filename: '[name].js',//輸出文件名稱默認使用原名
    publicPath: process.env.NODE_ENV === 'production'//真正的文件引用路徑，請看本身的index.js中build配置中寫的啥
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {//決定要作的事情
    extensions: ['.js', '.vue', '.json'],//省略擴展名，也就是說當使用.js .vue .json文件導入能夠省略後綴名
    alias: {
      'vue$': 'vue/dist/vue.esm.js',//$符號指精確匹配，路徑和文件名要詳細
      '@': resolve('src'),//resolve('src‘)//resolve('src')指的是項目根目錄中的src文件夾目錄，導入文件的時候路徑能夠這樣簡寫 import somejs from "@/some.js"就能夠導入指定文件
    }
  },
//用來解析不一樣模塊
  module: {
    rules: [
      {
        test: /\.vue$/,//正則表達式，表示當前loader能檢測.vue類型的文件（分析這個正則：/標記正則表達式的開始和結束，指的是在開始和結尾處哦，不然要使用/就得轉義\/;\.表示.,此處的\將.標記爲原意字符；$是正則表達式的結束？這個我不知道...）
        loader: 'vue-loader',//對vue文件使用vue-loader，該loader是vue單文件組件的實現核心，解析.vue文件
        options: vueLoaderConfig//將vueLoaderConfig當作參數傳遞給vue-loader,解析css相關文件
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',//對js文件使用babel-loader轉碼，該插件用來解析es6等代碼
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]//指明src文件夾 test文件夾 client文件夾下的js文件要使用該loader
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,//這些格式結尾的圖片文件
        loader: 'url-loader',//圖片文件使用url-loader插件，將圖片轉爲base64格式字符串
        options: {
          limit: 10000,//10000個字節如下的文件才用來轉爲dataUrl
          name: utils.assetsPath('img/[name].[hash:7].[ext]')//超過10000字節的圖片，就按照制定規則設置生成的圖片名稱，能夠看到用了7位hash碼來標記，.ext文件是一種索引式文件系統
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,//音頻 視頻類文件
        loader: 'url-loader',//也是用url-loader
        options: {
          limit: 10000,//10000個字節如下的文件才進行轉換
          name: utils.assetsPath('media/[name].[hash:7].[ext]')//這個name究竟是給誰起的啊喂，給超過limit字節限制的文件起的
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,//處理字體相關
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      },
      /*添加sass開始*/
      {
        test:/\.(woff2?|eot|ttf|otf)(\?.*)?$/,//這個能夠在vue組件中用sass scss等...
        loaders:['style','css','sass'],
      }
      /*添加sass結束*/
    ]
  },
  node: {//一個對象，每一個屬性都是node.js全局變量或模塊的名稱，value爲empty表示提供空對象
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,//false表示什麼都不提供，話說參數setImmediate表示異步遞歸？？？須要查閱node文檔了
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}

vue-cli腳手架之webpack.dev.conf.js

 

webpack.dev.conf.js  開發環境模式配置文件：

'use strict'//js按照嚴格模式執行
const utils = require('./utils')//導入utils.js
const webpack = require('webpack')//使用webpack來使用webpack內置插件
const config = require('../config')//config文件夾下index.js文件
const merge = require('webpack-merge')//引入webpack-merge插件用來合併webpack配置對象，也就是說能夠把webpack配置文件拆分紅幾個小的模塊，而後合併
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')//導入webpack基本配置
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')//生成html文件
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')//獲取port

const HOST = process.env.HOST//process.env屬性返回一個對象，包含了當前shell的全部環境變量。這句取其中的host文件？
const PORT = process.env.PORT && Number(process.env.PORT)//獲取全部環境變量下的端口？

//合併模塊，第一個參數是webpack基本配置文件webpack.base.conf.js中的配置
const devWebpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })//建立模塊時匹配請求的規則數組,這裏調用了utils中的配置模板styleLoaders
  },
  // cheap-module-eval-source-map is faster for development
  devtool: config.dev.devtool,//debtool是開發工具選項，用來指定如何生成sourcemap文件，cheap-module-eval-source-map此款soucemap文件性價比最高

  // these devServer options should be customized in /config/index.js
  devServer: {//webpack服務器配置
    clientLogLevel: 'warning',//使用內聯模式時，在開發工具的控制檯將顯示消息，可取的值有none error warning info
    historyApiFallback: {//當使用h5 history api時，任意的404響應均可能須要被替代爲index.html，經過historyApiFallback：true控制；經過傳入一個對象，好比使用rewrites這個選項進一步控制
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    hot: true,//是否啓用webpack的模塊熱替換特性。這個功能主要是用於開發過程當中，對生產環境無幫助。效果上就是界面無刷新更新。
    contentBase: false, // since we use CopyWebpackPlugin.這裏禁用了該功能。原本是告訴服務器從哪裏提供內容，一半是本地靜態資源。
    compress: true,//一切服務是否都啓用gzip壓縮
    host: HOST || config.dev.host,//指定一個host,默認是localhost。若是有全局host就用全局，不然就用index.js中的設置。
    port: PORT || config.dev.port,//指定端口
    open: config.dev.autoOpenBrowser,//是否在瀏覽器開啓本dev server
    overlay: config.dev.errorOverlay//當有編譯器錯誤時，是否在瀏覽器中顯示全屏覆蓋。
      ? { warnings: false, errors: true }
      : false,
    publicPath: config.dev.assetsPublicPath,//此路徑下的打包文件可在瀏覽器中訪問
    proxy: config.dev.proxyTable,//若是你有單獨的後端開發服務器api,而且但願在同域名下發送api請求，那麼代理某些URL會頗有用。
    quiet: true, // necessary for FriendlyErrorsPlugin  啓用 quiet 後，除了初始啓動信息以外的任何內容都不會被打印到控制檯。這也意味着來自 webpack 的錯誤或警告在控制檯不可見。
    watchOptions: {//webpack 使用文件系統(file system)獲取文件改動的通知。在某些狀況下，不會正常工做。例如，當使用 Network File System (NFS) 時。Vagrant 也有不少問題。在這些狀況下使用輪詢。
      poll: config.dev.poll,//是否使用輪詢
    }
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({//模塊HtmlWebpackPlugin
      filename: 'index.html',//生成的文件的名稱
      template: 'index.html',//能夠指定模塊html文件
      inject: true//在文檔上沒查到這個選項 不知道幹嗎的。。。
    }),
    // copy custom static assets
    new CopyWebpackPlugin([//模塊CopyWebpackPlugin  將單個文件或整個文件複製到構建目錄
      {
        from: path.resolve(__dirname, '../static'),//將static文件夾及其子文件複製到
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']//這個沒翻譯好，百度翻譯看不懂，請本身查文檔。。。
      }
    ])
  ]
})
//webpack將運行由配置文件導出的函數，而且等待promise返回，便於須要異步地加載所需的配置變量。
module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = process.env.PORT || config.dev.port
  portfinder.getPort((err, port) => {
    if (err) {
      reject(err)
    } else {
      // publish the new Port, necessary for e2e tests
      process.env.PORT = port
      // add port to devServer config
      devWebpackConfig.devServer.port = port

      // Add FriendlyErrorsPlugin
      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({//出錯友好處理插件
        compilationSuccessInfo: {//build成功的話會執行者塊
          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
        },
        onErrors: config.dev.notifyOnErrors//若是出錯就執行這塊,實際上是utils裏面配置好的提示信息
        ? utils.createNotifierCallback()
        : undefined
      }))

      resolve(devWebpackConfig)
    }
  })
})

vue-cli腳手架之webpack.prod.conf.js

 

webpack.prod.conf.js 生產環境配置文件：

'use strict'//js嚴格模式執行
const path = require('path')//這個模塊是發佈到NPM註冊中心的NodeJS「路徑」模塊的精確副本
const utils = require('./utils')//utils.js文件
const webpack = require('webpack')//webpack模塊
const config = require('../config')//config文件夾下的index.js  是否是很神奇？
const merge = require('webpack-merge')//合併數組、對象爲一個新的對象的模塊
const baseWebpackConfig = require('./webpack.base.conf')//webpack.base.conf.js
const CopyWebpackPlugin = require('copy-webpack-plugin')//拷貝文件和文件夾模塊
const HtmlWebpackPlugin = require('html-webpack-plugin')//爲html文件中引入的外部資源（好比script/link等）動態添加每次compile後的hash，保證文件名不重複的好處是防止引用緩存文件致使修改暫未生效；可生成建立html入口文件
const ExtractTextPlugin = require('extract-text-webpack-plugin')//抽離css樣式，防止將樣式打包到js中引發加載錯亂
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')//壓縮css插件
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')//壓縮js代碼。

const env = require('../config/prod.env')//設置爲生產環境production
//merge方法合併模塊對象，在這個文件裏是將基礎配置webpack.base.conf.js和生產環境配置合併
const webpackConfig = merge(baseWebpackConfig, {
  module: {//模塊配置
    rules: utils.styleLoaders({//原版註釋Generate loaders for standalone style files (outside of .vue)生成獨立的樣式文件裝載機
      sourceMap: config.build.productionSourceMap,//設置sourceMap
      extract: true,//
      usePostCSS: true
    })
  },
  devtool: config.build.productionSourceMap ? config.build.devtool : false,//指定是否使用sourceMap
  output: {//指定輸出
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),//編譯輸出的js文件存放在js文件夾下，命名規則添加hash計算
    /**
     * 打包require.ensure方法中引入的模塊，若是該方法中沒有引入任何模塊則不會生成任何chunk塊文件
     *
     * 好比在main.js文件中,require.ensure([],function(require){alert(11);}),這樣不會打包塊文件
     * 只有這樣纔會打包生成塊文件require.ensure([],function(require){alert(11);require('./greeter')})
     * 或者這樣require.ensure(['./greeter'],function(require){alert(11);})
     * chunk的hash值只有在require.ensure中引入的模塊發生變化,hash值纔會改變
     * 注意:對於不是在ensure方法中引入的模塊,此屬性不會生效,只能用CommonsChunkPlugin插件來提取
     */
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },
  plugins: [
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    new webpack.DefinePlugin({
      'process.env': env
    }),
    new UglifyJsPlugin({//壓縮js代碼的插件  具體能夠去npm查一下這個插件怎麼用以及能設置哪些參數
      uglifyOptions: {
        compress: {
          warnings: false
        }
      },
      sourceMap: config.build.productionSourceMap,//是否生成sourceMap
      parallel: true
    }),
    // extract css into its own file
    new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css'),
      // Setting the following option to `false` will not extract CSS from codesplit chunks.
      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
      allChunks: true,
    }),
    // Compress extracted CSS. We are using this plugin so that possible
    // duplicated CSS from different components can be deduped.
    new OptimizeCSSPlugin({
      cssProcessorOptions: config.build.productionSourceMap
        ? { safe: true, map: { inline: false } }
        : { safe: true }
    }),
    // generate dist index.html with correct asset hash for caching.
    // you can customize output by editing /index.html
    // see https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
    }),
    // keep module.id stable when vendor modules does not change
    new webpack.HashedModuleIdsPlugin(),
    // enable scope hoisting
    new webpack.optimize.ModuleConcatenationPlugin(),
    // split vendor js into its own file
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks (module) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      minChunks: Infinity
    }),
    // This instance extracts shared chunks from code splitted chunks and bundles them
    // in a separate chunk, similar to the vendor chunk
    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
    new webpack.optimize.CommonsChunkPlugin({
      name: 'app',
      async: 'vendor-async',
      children: true,
      minChunks: 3
    }),

    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]//添加插件，是webpack功能更豐富
})
//是否容許壓縮？
if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

if (config.build.bundleAnalyzerReport) {
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

module.exports = webpackConfig

vue-cli腳手架之webpack.test.conf.js

 

webpack單元測試配置：

// This is the webpack config used for unit tests.

var utils = require('./utils')//utils.js文件導入
var webpack = require('webpack')//webpack模塊導入
var merge = require('webpack-merge')//合併模塊插件
var baseConfig = require('./webpack.base.conf')//導入基礎配置webpack.base.conf.js

var webpackConfig = merge(baseConfig, {
  // use inline sourcemap for karma-sourcemap-loader
  module: {
    rules: utils.styleLoaders()
  },
  devtool: '#inline-source-map',
  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/test.env')//指定環境爲測試環境  test.env中設置了NODE_ENV=‘testing’
    })
  ]
})

// no need for app entry during tests
delete webpackConfig.entry

module.exports = webpackConfig

vue-cli腳手架之package.json

 

package.json文件配置及其含義，這個是vue-cli自動生成的文件，先貼一張代碼及其含義：

{
  "name": "secondproject",//模塊名稱
  "version": "1.0.0",//模塊版本
  "description": "A Vue.js project",//對模塊的描述
  "author": "datura",//做者是誰
  "private": true,//若是值爲true,npm將拒絕發佈它
  "scripts": {//值是一個對象，裏面指定了項目的生命週期各個環節須要執行的命令
    "dev": "node build/dev-server.js",//這個就是在命令行執行npm run dev,實際上是運行dev-server.js文件
    "build": "node build/build.js",//build命令（有一個鉤子的概念：好比這個build有prebuild和postbuild
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",//babel是一個編譯器，能夠把ES6編譯成ES5.，這句先是設置編譯環境爲test環境下；karma是一個運行時，它產生一個web服務環境來運行項目代碼，並執行測試。..
    "e2e": "node test/e2e/runner.js",//e2e模擬用戶行爲的測試，端到端測試
    "test": "npm run unit && npm run e2e"//執行單元測試和e2e測試
  },//關於npm鉤子：一般程序只能處理來自內部的消息，若是但願對外部發來的消息也能攔截處理，就須要用到Hook技術。好比想在run build以前自動執行點任務,能夠將其寫在run prebuild標籤裏；postbuild在build以後自動執行
  "dependencies": {//配置模塊依賴的模塊列表，key是模塊名稱，value是版本範圍，版本範圍是一個字符，可被一個或多個空格分割。
    "router": "^1.3.0",//路由版本
    "vue": "^2.2.1",//vue版本
    "vue-resource": "^1.2.1",//一個插件，經過xmlHttpRequest或jsonp發起請求並處理響應。
    "vue-router": "^2.3.0"//
  },
  "devDependencies": {//這裏寫的依賴是用於開發環境的，不發佈到生產環境。
    "autoprefixer": "^6.7.2",
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-latest": "^6.22.0",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chalk": "^1.1.3",
    "connect-history-api-fallback": "^1.3.0",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.26.1",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.14.1",
    "extract-text-webpack-plugin": "^2.0.0",
    "file-loader": "^0.10.0",
    "friendly-errors-webpack-plugin": "^1.1.3",
    "function-bind": "^1.1.0",
    "html-webpack-plugin": "^2.28.0",
    "http-proxy-middleware": "^0.17.3",
    "webpack-bundle-analyzer": "^2.2.1",
    "cross-env": "^3.1.4",
    "karma": "^1.4.1",
    "karma-coverage": "^1.1.1",
    "karma-mocha": "^1.3.0",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-sinon-chai": "^1.2.4",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "0.0.26",
    "karma-webpack": "^2.0.2",
    "lolex": "^1.5.2",
    "mocha": "^3.2.0",
    "chai": "^3.5.0",
    "sinon": "^1.17.7",
    "sinon-chai": "^2.8.0",
    "inject-loader": "^2.0.1",
    "babel-plugin-istanbul": "^3.1.2",
    "phantomjs-prebuilt": "^2.1.14",
    "chromedriver": "^2.27.2",
    "cross-spawn": "^5.0.1",
    "nightwatch": "^0.9.12",
    "selenium-server": "^3.0.1",
    "semver": "^5.3.0",
    "opn": "^4.0.2",
    "optimize-css-assets-webpack-plugin": "^1.3.0",
    "ora": "^1.1.0",
    "rimraf": "^2.6.0",
    "url-loader": "^0.5.7",
    "vue-loader": "^11.0.0",
    "vue-style-loader": "^2.0.0",
    "vue-template-compiler": "^2.2.1",
    "webpack": "^2.2.1",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-hot-middleware": "^2.16.1",
    "webpack-merge": "^2.6.1"
  },
  "engines": {//指定項目運行的node或者npm版本範圍，有點像安卓的指定開發level哦
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserlist": [//在不一樣的前端工具之間共享目標瀏覽器的庫，肯定哪些支持哪些版本的瀏覽器
    "> 1%",//全球有超1%的人使用的瀏覽器
    "last 2 versions",//根據CanIUse.com追蹤的最後兩個版本的全部瀏覽器
    "not ie <= 8"//排除先前查詢選擇的瀏覽器    天啦嚕 英語很差是硬傷 不知怎麼翻譯好理解
  ]
}

這塊想插播一篇文章，關於package.json文件講的很詳細很好理解，能夠做爲參考手冊收藏啦。

附上原文連接：http://www.javashuo.com/article/p-ecnxakli-cp.html

 

概述

本文檔是本身看官方文檔的理解+翻譯，內容是package.json配置裏邊的屬性含義。package.json必須是一個嚴格的json文件，而不只僅是js裏邊的一個對象。其中不少屬性能夠經過npm-config來生成。

 

name

package.json中最重要的屬性是name和version兩個屬性，這兩個屬性是必需要有的，不然模塊就沒法被安裝，這兩個屬性一塊兒造成了一個npm模塊的惟一標識符。模塊中內容變動的同時，模塊版本也應該一塊兒變化。
name屬性就是你的模塊名稱，下面是一些命名規則:

• name必須小於等於214個字節，包括前綴名稱在內（如 xxx/xxxmodule）。
• name不能以"_"或"."開頭
• 不能含有大寫字母
• name會成爲url的一部分，不能含有url非法字符
  下面是官網文檔的一些建議：
• 不要使用和node核心模塊同樣的名稱
• name中不要含有"js"和"node"。 It's assumed that it's js, since you're writing a package.json file, and you can specify the engine using the "engines" field. (See below.)
• name屬性會成爲模塊url、命令行中的一個參數或者一個文件夾名稱，任何非url安全的字符在name中都不能使用，也不能以"_"或"."開頭
• name屬性也許會被寫在require()的參數中，因此最好取個簡短而語義化的值。
• 建立一個模塊前能夠先到後邊的網址查查name是否已經被佔用. https://www.npmjs.com/

name屬性能夠有一些前綴如 e.g. @myorg/mypackage.在npm-scope(7)的文檔中能夠看到詳細說明

 

version

version必須能夠被npm依賴的一個node-semver模塊解析。具體規則見下面的dependencies模塊

 

description

一個描述，方便別人瞭解你的模塊做用，搜索的時候也有用。

 

keywords

一個字符串數組，方便別人搜索到本模塊

 

homepage

項目主頁url
注意: 這個項目主頁url和url屬性不一樣，若是你填寫了url屬性，npm註冊工具會認爲你把項目發佈到其餘地方了，獲取模塊的時候不會從npm官方倉庫獲取，而是會重定向到url屬性配置的地址。
（原文檔中用了 spit(吐)這個單詞，做者表示他不是在開玩笑:）

 

bugs

填寫一個bug提交地址或者一個郵箱，被你的模塊坑到的人能夠經過這裏吐槽，例如：

{ "url" : "https://github.com/owner/project/issues"
, "email" : "project@hostname.com"
}

url和email能夠任意填或不填，若是隻填一個，能夠直接寫成一個字符串而不是對象。若是填寫了url，npm bugs命令會使用這個url。

 

license

你應該爲你的模塊制定一個協議，讓用戶知道他們有何權限來使用你的模塊，以及使用該模塊有哪些限制。最簡單的，例如你用BSD-3-Clause 或 MIT之類的協議，以下：

{ "license" : "BSD-3-Clause" }

你能夠在https://spdx.org/licenses/這個地址查閱協議列表 。

 

和用戶相關的屬性: author, contributors

"author"是一個碼農， "contributors"是一個碼農數組。 "person"是一個有一些描述屬性的對象，以下 like this:

{ "name" : "Barney Rubble"
, "email" : "b@rubble.com"
, "url" : "http://barnyrubble.tumblr.com/"
}

也能夠按以下格式縮寫，npm會幫着轉換:
"Barney Rubble b@rubble.com (http://barnyrubble.tumblr.com/)"
email和url屬性實際上都是能夠省略的。描述用戶信息的還有一個"maintainers"（維護者）屬性。

 

files

"files"屬性的值是一個數組，內容是模塊下文件名或者文件夾名，若是是文件夾名，則文件夾下全部的文件也會被包含進來（除非文件被另外一些配置排除了）
你也能夠在模塊根目錄下建立一個".npmignore"文件（windows下沒法直接建立以"."開頭的文件，使用linux命令行工具建立如git bash），寫在這個文件裏邊的文件即使被寫在files屬性裏邊也會被排除在外，這個文件的寫法".gitignore"相似。

 

main

main屬性指定了程序的主入口文件。意思是，若是你的模塊被命名爲foo，用戶安裝了這個模塊並經過require("foo")來使用這個模塊，那麼require返回的內容就是main屬性指定的文件中 module.exports指向的對象。
它應該指向模塊根目錄下的一個文件。對大對數模塊而言，這個屬性更多的是讓模塊有一個主入口文件，然而不少模塊並不寫這個屬性。

 

bin

不少模塊有一個或多個須要配置到PATH路徑下的可執行模塊，npm讓這個工做變得十分簡單（實際上npm自己也是經過bin屬性安裝爲一個可執行命令的）
若是要用npm的這個功能，在package.json裏邊配置一個bin屬性。bin屬性是一個已命令名稱爲key，本地文件名稱爲value的map以下：

{ "bin" : { "myapp" : "./cli.js" } }

 

模塊安裝的時候，如果全局安裝，則npm會爲bin中配置的文件在bin目錄下建立一個軟鏈接（對於windows系統，默認會在C:\Users\username\AppData\Roaming\npm目錄下），如果局部安裝，則會在項目內的./node_modules/.bin/目錄下建立一個軟連接。
所以，按上面的例子，當你安裝myapp的時候，npm就會爲cli.js在/usr/local/bin/myapp路徑建立一個軟連接。
若是你的模塊只有一個可執行文件，而且它的命令名稱和模塊名稱同樣，你能夠只寫一個字符串來代替上面那種配置，例如：

{ "name": "my-program"
, "version": "1.2.5"
, "bin": "./path/to/program" }

 

做用和以下寫法相同:

{ "name": "my-program"
, "version": "1.2.5"
, "bin" : { "my-program" : "./path/to/program" } }

man

制定一個或經過數組制定一些文件來讓linux下的man命令查找文檔地址。
若是隻有一個文件被指定的話，安裝後直接使用man+模塊名稱，而無論man指定的文件的實際名稱。例如:

{ "name" : "foo"
, "version" : "1.2.3"
, "description" : "A packaged foo fooer for fooing foos"
, "main" : "foo.js"
, "man" : "./man/doc.1"
}

 

經過man foo命令會獲得 ./man/doc.1 文件的內容。
若是man文件名稱不是以模塊名稱開頭的，安裝的時候會給加上模塊名稱前綴。所以，下面這段配置：

{ "name" : "foo"
, "version" : "1.2.3"
, "description" : "A packaged foo fooer for fooing foos"
, "main" : "foo.js"
, "man" : [ "./man/foo.1", "./man/bar.1" ]
}

 

會建立一些文件來做爲man foo和man foo-bar命令的結果。
man文件必須以數字結尾，或者若是被壓縮了，以.gz結尾。數字表示文件將被安裝到man的哪一個部分。

{ "name" : "foo"
, "version" : "1.2.3"
, "description" : "A packaged foo fooer for fooing foos"
, "main" : "foo.js"
, "man" : [ "./man/foo.1", "./man/foo.2" ]
}

會建立 man foo 和 man 2 foo 兩條命令。

 

directories

CommonJs經過directories來制定一些方法來描述模塊的結構，看看npm的package.json文件https://registry.npmjs.org/npm/latest ，能夠發現裏邊有這個字段的內容。

目前這個配置沒有任何做用，未來可能會整出一些花樣來。

 

directories.lib

告訴用戶模塊中lib目錄在哪，這個配置目前沒有任何做用，可是對使用模塊的人來講是一個頗有用的信息。

 

directories.bin

若是你在這裏指定了bin目錄，這個配置下面的文件會被加入到bin路徑下，若是你已經在package.json中配置了bin目錄，那麼這裏的配置將不起任何做用。

 

directories.man

指定一個目錄，目錄裏邊都是man文件，這是一種配置man文件的語法糖。

 

directories.doc

在這個目錄裏邊放一些markdown文件，可能最終有一天它們會被友好的展示出來（應該是在npm的網站上）

 

directories.example

放一些示例腳本，或許某一天會有用 - -！

 

repository

指定一個代碼存放地址，對想要爲你的項目貢獻代碼的人有幫助。像這樣：

"repository" :
  { "type" : "git"
  , "url" : "https://github.com/npm/npm.git"
  }

"repository" :
  { "type" : "svn"
  , "url" : "https://v8.googlecode.com/svn/trunk/"
  }

 

若你的模塊放在GitHub, GitHub gist, Bitbucket, or GitLab的倉庫裏，npm install的時候可使用縮寫標記來完成：

"repository": "npm/npm"

"repository": "gist:11081aaa281"

"repository": "bitbucket:example/repo"

"repository": "gitlab:another/repo"

 

scripts

scripts屬性是一個對象，裏邊指定了項目的生命週期個各個環節須要執行的命令。key是生命週期中的事件，value是要執行的命令。
具體的內容有 install start stop 等，詳見https://docs.npmjs.com/misc/scripts

 

config

用來設置一些項目不怎麼變化的項目配置，例如port等。
用戶用的時候可使用以下用法：

http.createServer(...).listen(process.env.npm_package_config_port)

 

能夠經過npm config set foo:port 80來修改config。詳見https://docs.npmjs.com/misc/config

{ "name" : "foo"
, "config" : { "port" : "8080" } }

 

 

dependencies

dependencies屬性是一個對象，配置模塊依賴的模塊列表，key是模塊名稱，value是版本範圍，版本範圍是一個字符，能夠被一個或多個空格分割。
dependencies也能夠被指定爲一個git地址或者一個壓縮包地址。
不要把測試工具或transpilers寫到dependencies中。 下面是一些寫法，詳見https://docs.npmjs.com/misc/semver

• version 精確匹配版本
• >version 必須大於某個版本
• >=version 大於等於
• <version 小於
• <=versionversion 小於
• ~version "約等於"，具體規則詳見semver文檔
• ^version "兼容版本"具體規則詳見semver文檔
• 1.2.x 僅一點二點幾的版本
• http://... 見下面url做爲denpendencies的說明
• • 任何版本
• "" 空字符，和*相同
• version1 - version2 至關於 >=version1 <=version2.
• range1 || range2 範圍1和範圍2知足任意一個都行
• git... 見下面git url做爲denpendencies的說明
• user/repo See 見下面GitHub倉庫的說明
• tag 發佈的一個特殊的標籤，見npm-tag的文檔 https://docs.npmjs.com/getting-started/using-tags
• path/path/path 見下面本地模塊的說明
  下面的寫法都是能夠的:

{ "dependencies" :
  { "foo" : "1.0.0 - 2.9999.9999"
  , "bar" : ">=1.0.2 <2.1.2"
  , "baz" : ">1.0.2 <=2.3.4"
  , "boo" : "2.0.1"
  , "qux" : "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0"
  , "asd" : "http://asdf.com/asdf.tar.gz"
  , "til" : "~1.2"
  , "elf" : "~1.2.3"
  , "two" : "2.x"
  , "thr" : "3.3.x"
  , "lat" : "latest"
  , "dyl" : "file:../dyl"
  }
}

 

 

URLs as Dependencies

在版本範圍的地方能夠寫一個url指向一個壓縮包，模塊安裝的時候會把這個壓縮包下載下來安裝到模塊本地。

 

Git URLs as Dependencies

Git url能夠像下面同樣:

git://github.com/user/project.git#commit-ish
git+ssh://user@hostname:project.git#commit-ish
git+ssh://user@hostname/project.git#commit-ish
git+http://user@hostname/project/blah.git#commit-ish
git+https://user@hostname/project/blah.git#commit-ish

 

commit-ish 能夠是任意標籤，哈希值，或者能夠檢出的分支，默認是master分支。

 

GitHub URLs

支持github的 username/modulename 的寫法，#後邊能夠加後綴寫明分支hash或標籤：

{
  "name": "foo",
  "version": "0.0.0",
  "dependencies": {
    "express": "visionmedia/express",
    "mocha": "visionmedia/mocha#4727d357ea"
  }
}

 

Local Paths

npm2.0.0版本以上能夠提供一個本地路徑來安裝一個本地的模塊，經過npm install xxx --save 來安裝，格式以下：

../foo/bar
~/foo/bar
./foo/bar
/foo/bar

 

package.json 生成的相對路徑以下:

{
  "name": "baz",
  "dependencies": {
    "bar": "file:../foo/bar"
  }
}

這種屬性在離線開發或者測試須要用npm install的狀況，又不想本身搞一個npm server的時候有用，可是發佈模塊到公共倉庫時不該該使用這種屬性。

 

devDependencies

若是有人想要下載並使用你的模塊，也許他們並不但願或須要下載一些你在開發過程當中使用的額外的測試或者文檔框架。
在這種狀況下，最好的方法是把這些依賴添加到devDependencies屬性的對象中。
這些模塊會在npm link或者npm install的時候被安裝，也能夠像其餘npm配置同樣被管理，詳見npm的config文檔。
對於一些跨平臺的構建任務，例如把CoffeeScript編譯成JavaScript，就能夠經過在package.json的script屬性裏邊配置prepublish腳原本完成這個任務，而後須要依賴的coffee-script模塊就寫在devDependencies屬性種。
例如:

{ "name": "ethopia-waza",
  "description": "a delightfully fruity coffee varietal",
  "version": "1.2.3",
  "devDependencies": {
    "coffee-script": "~1.6.3"
  },
  "scripts": {
    "prepublish": "coffee -o lib/ -c src/waza.coffee"
  },
  "main": "lib/waza.js"
}

 

prepublish腳本會在發佈以前運行，所以用戶在使用以前就不用再本身去完成編譯的過程了。在開發模式下，運行npm install也會執行這個腳本（見npm script文檔），所以能夠很方便的調試。

 

peerDependencies

有時候作一些插件開發，好比grunt等工具的插件，它們每每是在grunt的某個版本的基礎上開發的，而在他們的代碼中並不會出現require("grunt")這樣的依賴，dependencies配置裏邊也不會寫上grunt的依賴，爲了說明此模塊只能做爲插件跑在宿主的某個版本範圍下，能夠配置peerDependencies：

{
  "name": "tea-latte",
  "version": "1.3.5",
  "peerDependencies": {
    "tea": "2.x"
  }
}

 

上面這個配置確保再npm install的時候tea-latte會和2.x版本的tea一塊兒安裝，並且它們兩個的依賴關係是同級的：
├── tea-latte@1.3.5
└── tea@2.2.0
這個配置的目的是讓npm知道，若是要使用此插件模塊，請確保安裝了兼容版本的宿主模塊。

 

bundledDependencies

上面的單詞少個d，寫成bundleDependencies也能夠。
指定發佈的時候會被一塊兒打包的模塊。

 

optionalDependencies

若是一個依賴模塊能夠被使用， 同時你也但願在該模塊找不到或沒法獲取時npm繼續運行，你能夠把這個模塊依賴放到optionalDependencies配置中。這個配置的寫法和dependencies的寫法同樣，不一樣的是這裏邊寫的模塊安裝失敗不會致使npm install失敗。
固然，這種模塊就須要你本身在代碼中處理模塊確實的狀況了，例如：

try {
  var foo = require('foo')
  var fooVersion = require('foo/package.json').version
} catch (er) {
  foo = null
}
if ( notGoodFooVersion(fooVersion) ) {
  foo = null
}

// .. then later in your program ..

if (foo) {
  foo.doFooThings()
}

optionalDependencies 中的配置會覆蓋dependencies中的配置，最好只在一個地方寫。

 

engines

你能夠指定項目運行的node版本範圍，以下：

{ "engines" : { "node" : ">=0.10.3 <0.12" } }

 

和dependencies同樣，若是你不指定版本範圍或者指定爲*，任何版本的node均可以。
也能夠指定一些npm版本能夠正確的安裝你的模塊，例如：

{ "engines" : { "npm" : "~1.0.20" } }

要注意的是，除非你設置了engine-strict屬性，engines屬性是僅供參考的。

 

engineStrict

注意：這個屬性已經棄用，將在npm 3.0.0 版本幹掉。

 

os

能夠指定你的模塊只能在哪一個操做系統上跑：

"os" : [ "darwin", "linux" ]

 

也能夠指定黑名單而不是白名單：

"os" : [ "!win32" ]

服務的操做系統是由process.platform來判斷的，這個屬性容許黑白名單同時存在，雖然沒啥必要這樣搞...

 

cpu

限制模塊只能在某某cpu架構下運行

"cpu" : [ "x64", "ia32" ]

一樣能夠設置黑名單:

"cpu" : [ "!arm", "!mips" ]

cpu架構經過 process.arch 判斷

 

preferGlobal

若是您的軟件包主要用於安裝到全局的命令行應用程序，那麼該值設置爲true ，若是它被安裝在本地，則提供一個警告。實際上該配置並無阻止用戶把模塊安裝到本地，只是防止該模塊被錯誤的使用引發一些問題。

 

private

若是這個屬性被設置爲true，npm將拒絕發佈它，這是爲了防止一個私有模塊被無心間發佈出去。若是你只想讓模塊被髮布到一個特定的npm倉庫，如一個內部的倉庫，可與在下面的publishConfig中配置倉庫參數。

 

publishConfig

這個配置是會在模塊發佈時用到的一些值的集合。若是你不想模塊被默認被標記爲最新的，或者默認發佈到公共倉庫，能夠在這裏配置tag或倉庫地址。

 

DEFAULT VALUES

npm設置了一些默認參數，如：

"scripts": {"start": "node server.js"}

若是模塊根目錄下有一個server.js文件，那麼npm start會默認運行這個文件。

"scripts":{"preinstall": "node-gyp rebuild"}

若是模塊根目錄下有binding.gyp, npm將默認用node-gyp來編譯preinstall的腳本

"contributors": [...]

若模塊根目錄下有AUTHORS 文件，則npm會按Name (url)格式解析每一行的數據添加到contributors中，能夠用#添加行註釋

 

參考文檔列表(https://docs.npmjs.com/)

semver(7)
npm-init(1)
npm-version(1)
npm-config(1)
npm-config(7)
npm-help(1)
npm-faq(7)
npm-install(1)
npm-publish(1)
npm-rm(1)