vuecli externals

externals干嘛用的

webpack有写,自己理解下:就是改变包引用路径,开发和生产环境统统改变有效。
比如 import Vue from ‘vue’ 默认来说 引用‘vue’默认从node_modules里面找vue,但是vue.config.js配置了externals,就不去引用node_modules,转而去找public/index.html里面的cdn有关vue的链接。就干了这么一回事。

image.png

所以最简单的配置就是:不区分开发环境和使用变量,直接用就是下面用法

configureWebpack: (config) => {
   
      /**
       * externals:externals配置的对象统统走cdn.(不管生产还是本地开发)
       * 解释一下:import A from 'a' 去使用小a的时候不走node_modules了,统统走public/index.html里面配置的cdn链接。前提是要往html里面配置cdn各种链接.到这里就结束了 externals用法就完了
       */
      config.externals = {
        vue: "Vue", //解释一下:import XX from 'vue' 这里的'vue' 就是externals的key vue. "Vue"是cdn vue链接全局挂载window上的Vue
        "vue-router": "VueRouter",
        moment: "moment",
        vant: "vant",
        axios: "axios",
        vconsole: "VConsole",
        lodash: "_",
      };
  },
//public/index.html
 <script  src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"> </script>
 ...

真实项目使用externals

  1. 区分本地和生产环境,本地走node_moduels,线上走cnd,因为cdn都是min.js/min.css。本地开发不好调用,所以本地用node_moduels
  2. 线上cdn和本地node_moduels所使用的包版本号要一致。具体看package.json里面包版本号
  3. public/index.html里面写入的那些cdn的js和css链接统统放vue.config.js里面,统一js管理

所以综合就是下面代码块

/**
 * 生产环境上cdn,本地还是走node_modules,但是2者版本号保持一致,版本号看package.json
 * https://unpkg.com/ unpkg如何找cdn链接
 * cdn  https://unpkg.com/jquery/  留下最后一个/
 * -> https://unpkg.com/browse/jquery@3.6.1/dist/jquery.slim.min.js  去掉browse/
 * -> https://unpkg.com/https://unpkg.com/jquery@3.6.1/dist/jquery.slim.min.js
 */
const CDN = {
  css: ["https://unpkg.com/vant@2.12.53/lib/index.css"],
  js: [
    "https://unpkg.com/vue@2.6.11/dist/vue.min.js",
    "https://unpkg.com/vue-router@3.2.0/dist/vue-router.min.js",
    "https://unpkg.com/vant@2.12.53/lib/vant.min.js",
    "https://unpkg.com/axios@1.1.3/dist/axios.min.js",
    "https://unpkg.com/vconsole@3.14.7/dist/vconsole.min.js",
    "https://unpkg.com/moment@2.29.4/min/moment.min.js",
    "https://unpkg.com/lodash@4.17.21/lodash.min.js",
  ],
};
module.exports = {
  publicPath: "./",
  productionSourceMap: false,

  devServer: {
    open: true,
  },

  configureWebpack: (config) => {
    if (process.env.NODE_ENV === "development") {
    } else {
      //生产环境
      /**
       * externals:externals配置的对象统统走cdn.(不管生产还是本地开发)
       * 解释一下:import A from 'a' 去使用小a的时候不走node_modules了,统统走public/index.html里面配置的cdn链接。前提是要往html里面配置cdn各种链接.到这里就结束了 externals用法就完了
       * 但是有的时候本地开发走node_modules,生产环境走cdn,于是需要区分环境
       */
      config.externals = {
        vue: "Vue", //解释一下:import XX from 'vue' 这里的'vue' 就是externals的key vue. "Vue"是cdn vue链接全局挂载window上的Vue
        "vue-router": "VueRouter",
        moment: "moment",
        vant: "vant",
        axios: "axios",
        vconsole: "VConsole",
        lodash: "_",
      };
    }
  },
  //修改已有插件用chainWebpack vuecli官网明确说过。
  //这里就解释了为啥不在configureWebpack配置define,其实也可以配,不过很麻烦。
  chainWebpack: (config) => {
    config.plugin("define").tap((args) => {
      //这样是搞不出来的  args[0]['process_env'].isProd=JSON.stringify(process.env.NODE_ENV !== "development");
      args[0].isProd = JSON.stringify(process.env.NODE_ENV !== "development"); //都需要JSON.stringify
      args[0].CDN = JSON.stringify(CDN);
      return args;
    });
  },
};

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <!-- 生产环境生效 配合externals一起用
 直接就是isProd CDN使用 而不是htmlWebpackPlugin.options.isProd htmlWebpackPlugin.options.CDN使用.⚠️  -->
    <% if(isProd){ %> 
      <% for(var i in CDN.css) {%> 
        <link rel="stylesheet" href="<%= CDN.css[i]%>">
      <% } %>  
    <% } %>

    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app"></div>

    <!-- built files will be auto injected -->
    <!-- 生产环境生效  配合externals一起用-->

    <% if(isProd){ %>
      <% for(var i in CDN.js) {%> 
        <script  src="<%= CDN.js[i]%>"> </script>
      <% } %>  
    <% } %>
  </body>
</html>


最后码字不易,希望看官点赞👍

© 版权声明
THE END
喜欢就支持一下吧
点赞5 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容