vue 프로젝트의build 폴더의build.js 파일 설명

build 폴더는 프로젝트 구축 웹 패키지 관련 코드 파일 디렉터리입니다:build build.js 생산 환경 구축 코드 check-version.js 검사 node npm 버전utils.js 구축 도구 관련 vue-loader.conf.js webpack loader 설정 webpack.base.conf.js 웹팩 기본 구성 웹팩.dev.conf.js 웹팩 개발 환경 설정, 로컬 서버 웹팩 구축.pro.conf.js webpack 프로덕션 환경 구성
겸사겸사 생산 환경과 개발 환경의 차이점을 말씀드리자면, 개발 환경은 바로 우리가 개발할 때의 환경입니다. 자신의 지점에서 일을 합니다.
생산 환경은 사용자가 사용하는 환경으로 특정한 인원이 유지하고 일반인은 수정할 권한이 없다
본론으로 돌아가기, 다음은build 디렉터리 설정입니다
1,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의 관련 프로세스입니다.전역 변수이기 때문에, 노드 프로그램에서는 리퀘스트 () 가 필요하지 않습니다.프로세스가 모두 하나의 대상이기 때문에 env는 자연히 하나의 속성이다. 이 속성은 사용자 환경 정보를 포함하는 대상을 되돌려준다.터미널에서 node를 입력한 후 프로세스를 입력하십시오.env에서 출력된 정보를 볼 수 있습니다.
NODE_ENV는 프로세스가 아닙니다.env 대상에 있는 원래의 속성은 우리가 추가한 환경 변수로 현재 처한 개발 단계를 확정하는 데 사용된다.일반 생산 단계는production, 개발 단계는develop으로 설정하고 스크립트에서process를 읽습니다.env.NODE_ENV. 스크립트를 실행할 때 환경 변수를 패키지에서 이렇게 변경할 수 있습니다.json 파일의 scripts에 명령을 추가하려면 다음과 같이 하십시오.
NODE_ENV=production node build.js
그러나 이 명령은 Windows의 학생들이 코드를 끌어내린 후에 잘못 보고되었다. 왜냐하면 Windows에 설정된 방식이 다르기 때문이다.
set NODE_ENV=production node build.js
하지만 컴퓨터에 따라 설정이 다르면 안 될 텐데, 이때cross-env가 구조하러 왔어요.크로스-env는 여러 플랫폼에서 환경 변수를 설정하고 사용할 수 있습니다. npm install --save-dev 크로스-env 다음에 크로스-env를 통해 크로스-env NODE 를 설정할 수 있습니다.ENV=production node build.js
이렇게 설정하면 스크립트에서 프로세스를 사용할 수 있습니다.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로 웹팩 패키지 도구를 구축할 때 생산 환경에서build시마다dist디렉터리를 삭제하고 재생성하여dist디렉터리 파일이 점점 많아지는 것을 방지한다