vueプロジェクトのbuildフォルダのbuild.jsファイルの説明

buildフォルダは、プロジェクト構築webpack関連コードファイルディレクトリです.build build.js生産環境構築コードcheck-version.js node npmバージョンutilsをチェックします.js構築ツール関連vue-loader.conf.js webpack loaderはwebpackを設定する.base.conf.js webpack基礎配置webpack.dev.conf.js webpack開発環境設定、ローカルサーバwebpackを構築する.pro.conf.js webpack生産環境構成
ちなみに生産環境と開発環境の違い開発環境とは、我々が開発した時の環境であり、自分の分岐点で働いていることです
生産環境はユーザーが使用する環境で、特定の人員が維持し、一般人は修正する権限がない.
本題に戻ります.次はbuildディレクトリの構成です.
一、buildディレクトリのbuils.jsファイル
‘use strict’ require(’./check-versions’)()
process.env.NODE_ENV = ‘production’
const ora = require(‘ora’) const rm = require(‘rimraf’) const path = require(‘path’) const chalk = require(‘chalk’) const webpack = require(‘webpack’) const config = require(’…/config’) const webpackConfig = require(’./webpack.prod.conf’)
const spinner = ora(‘building for production…’) spinner.start()
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { if (err) throw err webpack(webpackConfig, (err, stats) => { spinner.stop() if (err) throw err process.stdout.write(stats.toString({ colors: true, modules: false, children: false,//If you are using ts-loader, setting this to true will make TypeScript errors show up during build. chunks: false, chunkModules: false }) + ‘’)

if (stats.hasErrors()) {
  console.log(chalk.red('  Build failed with errors.
'))
  process.exit(1)
}

console.log(chalk.cyan('  Build complete.
'))
console.log(chalk.yellow(
  '  Tip: built files are meant to be served over an HTTP server.
' +
  '  Opening index.html over file:// won\'t work.
'
))

}) })

process.env.NODE_ENV = ‘production’

プロセスオブジェクトはグローバル変数であり、現在のnodeを提供する.jsに関する情報、および現在のnodeを制御する.jsに関するプロセス.グローバル変数であるため、require()を必要とせずにnodeアプリケーションで常に使用できます.プロセスがオブジェクトである以上、envは自然にその属性であり、この属性はユーザー環境情報を含むオブジェクトを返します.端末にnodeを入力後、processを入力.Envは印刷された情報を見ることができます.
NODE_ENVはプロセスじゃないEnvオブジェクトに既存のプロパティがあり、現在の開発フェーズを決定するために独自に追加された環境変数です.一般的な生産段階をproduction、開発段階をdevelopとする、スクリプトにprocessを読み込む.env.NODE_ENV. スクリプトを実行するとき、packageで環境変数を変更できます.jsonファイルのscriptsにコマンドを追加します.
NODE_ENV=production node build.js
しかし、このコマンドはWindowsの学生がコードを引いた後、Windowsの設定方法が異なるため、エラーを報告しました.
set NODE_ENV=production node build.js
しかし、パソコンによって設定が違うのは無理でしょう.この時cross-envが助けに来ました.cross-envはプラットフォーム間での設定と環境変数を使用してインストールできます:npm install--save-dev cross-env次にcross-envでcross-env NODEを設定できます.ENV=production node build.js
このように設定すると、スクリプトでprocessを使用することができます.env.NODE_ENVですが、モジュールでは使用できません.モジュールで直接使用するには、いくつかの構成が必要です.
DefinePlugin
DefinePluginでは、宣言なしにモジュール内で直接使用できるグローバル変数を定義できます.
const webpack = require(‘webpack’);
module.exports = { entry: { app: ‘./src/app’ }, output: { path: ‘dist’, filename: ‘bundle.js’ }, plugins: [ new webpack.DefinePlugin({ ‘process.env.NODE_ENV’: ‘production’ }) ] };
DefinePluginは文字列ではなく直接コンテンツを置き換えたので、new webpackと定義することが多い.DefinePlugin({ ‘process.env.NODE_ENV’: JSON.stringify(process.env.NODE_ENV) })
これでそのまま使えるようになりました_モジュール内で環境変数に応じて異なるurlを構成します
let url = ‘’; if (process.env.NODE_ENV === ‘testing’) { url = ‘http://my.test.cn’; } else if (process.env.alpord === ‘alpord’) { url = ‘http://my.alpord.cn’; } else if (process.env.NODE_ENV === ‘production’) { url = ‘http://my.product.cn’; } else { url = ‘http://my.develop.cn’; }

ora oraモジュールはnodeを実現する.jsコマンドライン環境のloading効果や、各種状態を表示するアイコンなど

使用:npm install--save ora const ora=require(‘ora’);
const spinner = ora(‘Loading unicorns’).start();
setTimeout(() => { spinner.color = ‘yellow’; spinner.text = ‘Loading rainbows’; }, 1000); spinner.start();//開始するstop();//の最後の部分

rimraf rimrafパッケージの役割:rm-rfコマンドをパッケージ形式でパッケージ化することは、フォルダが空であるかどうかにかかわらず、ファイルとフォルダを削除するために使用されます.

pathモジュールNode.js pathモジュールは、ファイルパスを処理するためのいくつかの小道具

を提供する.

chalk chalkパッケージの役割は、フォントスタイル(太字、非表示など)フォント色背景色

を含むコンソール内の文字列のスタイルを変更することです.

nodeのrimrafモジュールを利用してdistフォルダを削除vue-cliを使用してwebpackパッケージツールを構築する場合、生産環境ではbuildのたびにdistディレクトリを削除し、distディレクトリファイルがますます多くなることを防止するために再生成する