vue-cli足場プロジェクトの構築プロセス

Vueビルドプロセス

インストールvue
npmインストールvue

vue-cliをインストールする

npm install vue-cli

webpackテンプレート
vue init webpack my-projectに基づいて新しいプロジェクトを作成します

eslint作成者のメールボックスアイテムの説明を使用するかどうかなど、いくつかの構成を実行します。

プロジェクトに入り、
cd my-project
npm install
npm run devをインストールして実行します。

次に、プロジェクトの対応するWebpackを構成します（主に、本番環境と開発環境の構成、CSS写真などの静的リソースの構成、いくつかのプラグインのインストール）、nodejs、ディレクトリ構造の割り当て、nodejs構成、.jsonファイルのエントリファイルMain.js、app.vueなど、開発を迅速化するために必要なプラグインは、公式Webサイトにアクセスして、手順に従ってインストールし、例を確認して作成するだけです。もう1つは、プロジェクト開発の特定の問題を分析して分析することです。解決する

プロジェクトの構造

├── build --------------------------------- webpack相关配置文件
│   ├── build.js --------------------------webpack打包配置文件
│   ├── check-versions.js ------------------------------ 检查npm,nodejs版本
│   ├── logo.png ---------------------------------- 项目 logo
│   ├── utils.js --------------------------------------- 配置资源路径，配置css加载器
│   ├── vue-loader.conf.js ----------------------------- 配置css加载器等
│   ├── webpack.base.conf.js --------------------------- webpack基本配置
│   ├── webpack.dev.conf.js ---------------------------- 用于开发的webpack设置
│   ├── webpack.prod.conf.js --------------------------- 用于打包的webpack设置
├── config ---------------------------------- 配置文件
       ├── index.js ------------------------------ 开发和生产环境配置文件
├── node_modules ---------------------------- 存放依赖的目录
├── src ------------------------------------- 源码
│   ├── assets ------------------------------ 静态文件
│   ├── components -------------------------- 组件
│   ├── main.js ----------------------------- 主js
│   ├── App.vue ----------------------------- 项目入口组件
│   ├── router ------------------------------ 路由
├── package.json ---------------------------- node配置文件
├── .babelrc--------------------------------- babel配置文件
├── .editorconfig---------------------------- 编辑器配置
├── .gitignore------------------------------- 配置git可忽略的文件

Webpack構成の焦点

プロジェクト構成ファイルを見る前に、webpackの一般的に使用されるいくつかのツールとプラグインを最初に理解しましょう。これに精通している場合は、このセクションをスキップして、構成ファイルの分析に直接進んでください。

1.パスモジュール

pathはnode.jsのモジュールで、ディレクトリオブジェクトを処理して開発効率を向上させるために使用されます

    常用方法：
    path.join(): 用于连接路径。该方法的主要用途在于，会正确使用当前系统的路径分隔符，Unix 系统是 ”/“，Windows系统是 ”\“
    path.resolve() 用于将相对路径转为绝对路径

    常使用的文件路径
    __dirname: 总是返回被执行的 js 所在文件夹的绝对路径
    __filename: 总是返回被执行的 js 的绝对路径
    process.cwd(): 总是返回运行 node 命令时所在的文件夹的绝对路径

2.プロセス

プロセスオブジェクトはノードのグローバルオブジェクトであり、現在のノードプロセスに関する情報を提供します。

    process 对象提供一系列属性，用于返回系统信息
    process.argv：返回当前进程的命令行参数数组。
    process.env：返回一个对象，成员为当前Shell的环境变量，比如process.env.HOME
    process.pid：当前进程的进程号

3.ソースマップ==ソース

簡単に言うと、ソースマップは位置情報を格納する情報ファイルです。すなわち、変換後のコードの各位置は、変換前の位置に対応している。これにより、エラーが発生すると、デバッグツールは変換されたコードではなく、元のコードを直接表示します。これは間違いなく開発者に大きな利便性をもたらしました。webpackのdevtoolには7つのSourceMapモードがあります

模様	説明する
評価	各モジュールはevalにカプセル化され、ラップされて実行され、コメントが@@ sourceURLの最後に追加されます
ソースマップ	SourceMapファイルを生成します。
隠しソースマップ	source-mapと同じですが、バンドルの最後にコメントは追加されません。
inline-source-map	DataUrlの形式でSourceMapファイルを生成します。
eval-source-map	各モジュールはeval（）によって実行され、DataUrlの形式でSourceMapを生成します。
安いソースマップ	ローダーのソースマップ（バベルのソースマップなど）を除いて、列情報（列マッピング）のないSourceMapsファイルを生成します。
格安モジュールソースマップ	列マッピングなしでSourceMapsファイルを生成し、ローダーのsourcemapも対応する行のみを含むように簡略化されます。

4. webpack-merge

開発と生産の建設目標は大きく異なります。開発環境では、ライブのリロードまたはホットモジュールの交換機能を備えた強力なソースマップとlocalhostサーバーが必要です。本番環境での目標は、読み込み時間を短縮するために、より小さなバンドル、より軽量のソースマップ、より最適化されたリソースに焦点を当てることです。論理的に分離されているため、通常、環境ごとに個別のWebpack構成を作成することをお勧めします。一般的な構成の部分では、共通ファイルを抽象化し 、webpack-mergeツールの「ユニバーサル」構成により、環境固有の構成でコードを繰り返す必要がありませんでした。

5. ExtractTextWebpackPlugin

ExtractTextWebpackPlugin  プラグインは通常、スタイルファイルを分離するために使用されます。分離されたファイルは、JSバンドルに埋め込まれませんが、別のファイルに入れられます。スタイルファイルが大きい場合、スタイルを事前にロードできます。設定例は以下の通りです

    const ExtractTextPlugin = require("extract-text-webpack-plugin");
    module.exports = {
       module: {
          rules: [
          {
             test: /\.css$/,
             use: ExtractTextPlugin.extract({
             fallback: "style-loader",
             use: "css-loader"
          })
       }]
    },
        plugins: [
            new ExtractTextPlugin("styles.css"),
        ]
    }

すべてのエントリチャンク（エントリチャンク）で参照されている* .cssを個別のCSSファイルに移動します。したがって、スタイルはJSバンドルに埋め込まれなくなり、個別のCSSファイル（つまり、styles.css）に配置されます。スタイルファイルのサイズが大きい場合は、CSSバンドルがJSバンドルと並行してロードされるため、事前のロードが高速になります。

6.html-webpack-plugin

複数のwebpackエントリポイントがある場合、それらはすべて、生成されたHTMLファイルのスクリプトタグ内にあります。webpackの出力にCSSアセットがある場合（たとえば、ExtractTextPluginを使用してCSSを抽出する場合）、これらはHTMLヘッドのタグに含まれます。通常、開発では、CDNとブラウザーキャッシュを回避するために、通常、bundle.jsファイルとハッシュ値を出力します。たとえば  [hash].bundle.js、html-webpack-pluginを使用   すると、希望に満ちたbundle.jsはhtmlファイルを参照します。

7.optimize-css-assets-webpack-plugin

スクリプトから抽出されたCSSを最適化するために使用される、構成例は次のとおりです

    var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
    module.exports = {
      module: {
        rules: [
          {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
          }
        ]
      },
      plugins: [
        new ExtractTextPlugin('styles.css'),
        new OptimizeCssAssetsPlugin({
          assetNameRegExp: /\.optimize\.css$/g,
          cssProcessor: require('cssnano'),
          cssProcessorOptions: { discardComments: { removeAll: true } },
          canPrint: true
        })
      ]
    };

8.CopyWebpackPlugin

CopyWebpackPluginは、リソースのコピー、プロジェクトファイルの分類および統合に通常使用されるプラグインの名前から彼の役割を確認するのは難しくありません

9.friendly-errors-webpack-plugin

friendly-errors-webpack-pluginは、ターミナルで実行されているwebapckの警告とエラーをよりよく見ることができ、開発エクスペリエンスを改善します

10.UglifyjsWebpackPlugin

UglifyjsWebpackPluginは、 jsコードを圧縮するために使用されます

11.開発中のサーバー（DevServer）

Webpackプロジェクトサービスの場合、通常、開発フェーズでプロジェクトのホットリフレッシュ、サービス圧縮、プロジェクト代理店などを構成するために使用します。一般的に使用されるいくつかの構成パラメーターは、次のように導入されます

    const config = require('../config')

    // config 文件里做了用户自定的服务参数配置

    devServer: {
        clientLogLevel: 'warning',  // 在开发攻击的控制台中显示信息，便于开发调试，你可以将参数配置成 "none" 来进行关闭
         historyApiFallback: { // 当使用 HTML5 History API 时，任意的 404 响应都可能需要被替代为 index.html
            rewrites: [
               { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
            ],
         },
         hot: true,   //启用项目的热刷新，即模块热替换特性
         contentBase: false,   // 告诉服务器从哪里提供内容。只有在你想要提供静态文件时才需要。这里禁用，因为配置了 CopyWebpackPlugin 的使用
         compress: true,
         host: HOST || config.dev.host,   //指定使用一个域名。默认是 localhost
         port: PORT || config.dev.port,   //指定要监听请求的端口号：
         open: config.dev.autoOpenBrowser, //open 参数配置，如果配置成 true ，项目启动后会自动打开浏览器
         overlay: config.dev.errorOverlay   //当有错误或则警告的时候在页面上显示一个全屏的遮罩提示
             ? { warnings: false, errors: true }
             : false,
         publicPath: config.dev.assetsPublicPath, //此路径下的打包文件可在浏览器中访问
         proxy: config.dev.proxyTable,           //代理API的请求
         quiet: true,       //启用 quiet 后，除了初始启动信息之外的任何内容都不会被打印到控制台,特别是使用了 FriendlyErrorsPlugin 插件的时候
         watchOptions: {   //与监视文件相关的控制选项。是否使用轮询
               poll: config.dev.poll,
         }
    },

構成ファイルの分析

上記の構成を理解することで、webpackの一般的に使用されるプラグインとツールをある程度理解する必要があります。vue-cliの足場によって生成される構成を見てみましょう

config.js

'use strict'

const path = require('path') // 引用项目的 path 模块

module.exports = {
  dev: {

    // 路径配置
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},

    // 各种开发服务配置
    host: 'localhost', // 开发环境域名 可以被 node 全局变量process.env.HOST 重写
    port: 8080, //配置开发服务端口，可以被 node 全局变量 process.env.PORT 重写, 需要使用未被占用的端口
    autoOpenBrowser: false, //服务启动是否自动代开浏览器
    errorOverlay: true,   //是否在发生错误的时候，在页面整屏增加一个错误遮罩
    notifyOnErrors: true,  //是否通知错误 ，在我们的项目配置中和 friendly-errors-webpack-plugin 结合使用
    poll: false, // 服务监听是否轮询操作

    // 配饰是否使用 Eslint Loader 进行语法检测
    // 如果使用，在开发构建阶段，会对你的代码会进行检测
    // 检测出来的警告和错误会白展示在开发工具的控制台

    useEslint: true,  //进行语法检测

    // 配置是否将 eslint 语法检测的警告和错误展示在页面整屏的遮罩上

    showEslintErrorsInOverlay: false,  // 语法检测的警告和错误不展示在遮罩上

    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    // 在上面的介绍中，我们知道 source map 是用来将我们构建后被转化的代码对应构建前的代码，便于 debug
    // cheap-module-eval-source-map 和我们介绍的 cheap-module-source-map 很类似，但是 SourceMap 会被作为数据添加到包中
    devtool: 'cheap-module-eval-source-map',

    // 如果你的开发工具不能进行 vue-files 的 debug ，可以将以下设置设置成 false

    cacheBusting: true,

    cssSourceMap: true
  },

  build: {
    // index.html 文件模板
    index: path.resolve(__dirname, '../dist/index.html'),

    // 打包路径配置
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    /**
     * Source Maps
     */

    //生产环境 source map 配置

    productionSourceMap: true,
    devtool: '#source-map',

    // 因为很多的主流服务都会 通过 gzip 压缩过你的所有静态资源，我们的配置默认不开启 gzip
    // 如果要设置成开启,请先确保已经安装好 compression-webpack-plugin 插件
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // 启动 build 命令的时候，额外添加一个参数，打包后会自动生成一个分析报告文件，例如 npm run build --report ，可以通过配置 true ，false 来关闭
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

check-versions.js

このファイルは主に、現在の環境のノードとnpmのバージョンが必要なものと一致しているかどうかを確認するために使用されます。

    'use strict'
    const chalk = require('chalk')  // 改变命令行中的字体颜色，大致这样用chalk.blue('Hello world')
    const semver = require('semver')  //是用来对特定的版本号做判断的

    const packageConfig = require('../package.json')  // 项目 npm 配置文件，获取依赖及版本信息，requrie返回的就是json对象
    const shell = require('shelljs') //用来执行Unix系统命令，调用系统命令更加方便

    //把cmd这个参数传递的值转化成前后没有空格的字符串，也就是版本号
    function exec (cmd) {
      return require('child_process').execSync(cmd).toString().trim()
    }


    const versionRequirements = [
      {
        name: 'node',
        currentVersion: semver.clean(process.version),  // 提取进程版本信息转化成规定格式，也就是 '  =v1.2.3  ' -> '1.2.3' 这种功能
        versionRequirement: packageConfig.engines.node // package.json 的 node 的版本信息
      }
    ]

    if (shell.which('npm')) {
      versionRequirements.push({
        name: 'npm',
        currentVersion: exec('npm --version'),   //当前的版本信息
        versionRequirement: packageConfig.engines.npm //package.json 的 node 的版本信息
      })
    }

    module.exports = function () {
      const warnings = []

      for (let i = 0; i < versionRequirements.length; i++) {
        const mod = versionRequirements[i]

        // 如果当前版本号不符合 package.json 要求的版本号，红色表示当前版本信息，绿色表示要求的版本信息，添加到 warnings 待输出
        if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
          warnings.push(mod.name + ': ' +
            chalk.red(mod.currentVersion) + ' should be ' +
            chalk.green(mod.versionRequirement)
          )
        }
      }

      //输出版本号不相符的提示 warnings
      if (warnings.length) {
        console.log('')
        console.log(chalk.yellow('To use this template, you must update following to modules:'))
        console.log()

        for (let i = 0; i < warnings.length; i++) {
          const warning = warnings[i]
          console.log('  ' + warning)
        }

        console.log()
        process.exit(1)
      }
    }

build.js

    'use strict'

    //打包前判断当先开发环境的 node 和 npm 版本和 package.json 要求的时候一样
    require('./check-versions')()

    process.env.NODE_ENV = 'production'

    const ora = require('ora')  // 在用户打包的时候能够让用户知道正在进行，一个加载中的样式，转啊转
    const rm = require('rimraf') //这个模块是用来清除之前的打的包，因为在vue-cli中每次打包会生成不同的hash
    const path = require('path') //node 路径模块，便于我们操作文件路径
    const chalk = require('chalk') //带颜色的输出模块，能在控制台中输出不同的样色
    const webpack = require('webpack') //webpack 不解释
    const config = require('../config') // 项目中的配置文件，