精华内容
参与话题
问答
  • 看到有人误解externals的作用,所以必须先正确认识externals的作用 1.作用 首先webpack提供这个==externals==选项作用是==从打包的bundle文件中排除依赖==。换句话说就是让在项目中通过import引入的依赖在打包的...

    排除误区: 
    看到有人误解externals的作用,所以必须先正确认识externals的作用

    1.作用
    首先webpack提供这个==externals==选项作用是==从打包的bundle文件中排除依赖==。换句话说就是让在项目中通过import引入的依赖在打包的时候不会打包到bundle包中去,而是通过script的方式去访问这些依赖。

    2.怎么用?
    以jquery为例子,目的是在runtime时通过cdn获取jquery依赖,在打包时忽略他的打包

    步骤一:

    //index.html
    <script
      src="https://code.jquery.com/jquery-3.1.0.js"
      integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
      crossorigin="anonymous">
    </script>


    步骤二:

    //webpack.config.js

    module.exports = {
      //...
      externals: {
        jquery: 'jQuery' 
        //将需要忽略打包的都写在这个里面,但前提是index.html文件里面必须script引入
      }
    };
    //属性名jquery指的是  import  $ from 'jquery'中的  'jquery'
    属性值 jQuery指的是jquery插件暴露出来的全局对象名。按理来说$应该也是可以写在属性值里面的,(也是jquery暴露的啊,但我没试过行不行)。

    步骤三:

    文件中的
    import $ from 'jquery';
    千万不能去掉。  很重要,好多人就是把它去掉了跑过来问我为啥我的还是报错jquery is  undefined。  
     

    展开全文
  • 在vue.config.js里这样写 ... * externals 对象属性解析: * '包名' : '在项目中引入的名字' * 以element-ui举例 我再main.js里是以 * import ELEMENT from 'element-ui' * Vue.use(ELEMENT, { si

    在vue.config.js里这样写

    const isProduction = process.env.VUE_APP_MODE === 'production'
    
    const cdn = {
      // 忽略打包的第三方库
      /**
      * externals 对象属性解析:
      * '包名' : '在项目中引入的名字'
      * 以element-ui举例 我再main.js里是以
      * import ELEMENT from 'element-ui'
      * Vue.use(ELEMENT, { size: 'small' })
      * 这样引入的,所以我的externals的属性值应该是ELEMENT
      */
      externals: {
        vue: 'Vue',
        vuex: 'Vuex',
        'vue-router': 'VueRouter',
        axios: 'axios',
        'element-ui': 'ELEMENT'
      },
      js: [
        'https://cdn.jsdelivr.net/npm/vue',
        'https://unpkg.com/vue-router/dist/vue-router.js',
        'https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js',
        'https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js',
        'https://unpkg.com/element-ui@2.13.2/lib/index.js'
      ],
      css: [
        'https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css'
      ]
    }
    
    module.exports = {
    	chainWebpack: (config) => {
    		if (isProduction) {
    	      config.plugin('html').tap((args) => {
    	        args[0].cdn = cdn
    	        return args
    	      })
        	}
        	config.plugin('html').tap(args => { // 所有环境配置统一的title
    	        args[0].title = '外部联网协议配置系统'
    	        return args
          })
    	}
    
    	configureWebpack: config => {
    		config.externals = cdn.externals
    	}
    }
    

    在index.html里这样写

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
        <link rel="stylesheet" href="./reset.css">
        <title><%= htmlWebpackPlugin.options.title %></title>
        <!-- 使用CDN的CSS文件 -->
        <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
          <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style">
          <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
        <% } %>
      </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 -->
        <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
          <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
        <% } %>
      </body>
    </html>
    

    这样就成功的配置了生产环境第三方库采用cdn引入。能有效减小打包出来的文件体积,我的从2.6MB => 1.7MB ,减少了34%

    展开全文
  • Webpack的externals的使用

    万次阅读 2018-08-03 10:34:50
    推荐一篇文章...   通过这种方式引入的依赖库,不需要webpack处理,编译进文件中,在我们需要,使用它的时候可以通过CMD、AMD、或者window全局方式访问。   ...s...

    推荐一篇文章https://www.cnblogs.com/samli15999/p/7047968.html

     

    通过这种方式引入的依赖库,不需要webpack处理,编译进文件中,在我们需要,使用它的时候可以通过CMD、AMD、或者window全局方式访问。

     

    比如我们在index.html用CDN的方式引入jquery,webpack编译打包时不处理它,却可以引用到它。

    <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>

    使用

    const $ = require("jquery")
    $("#content").html("<h1>hello world</h1>")

    配置

    externals: {
          jquery: "jQuery"
        },

     

    其实,我们使用这种方式的另一个目的是为了压缩工程大小,如果所有的依赖包都压缩打包到应用中,尤其是echart这样的大型库,会导致文件过大,如果外部引入,按需引入,可以压缩应用大小。

     

    我们可以自己写一个例子,引入到工程中

    1. 定义一个tools.js文件
    2. 编写一个方法
    window.Tools = {
        add: function(num1, num2) {
          return num1 + num2
        }
      }

          3.在index.html中引入它(先放到CDN中)

    <script src="http://xxx/tools.min.js"></script>

          4.配置externals

    externals: {
           mathTools: "tools"
         },

          5.使用

    const tools = require('mathTools')
    
    const res = tools.add(1,2)

          或者

    Import tools = from 'mathTools'
    
    var res = tools.add(1,2)
    
    Console.log(res)

     

    看了这个之后,我明白了一件事。

    我们引入到工程中的文件,无论是js,css还是别的什么,然后就可以把这些引入的文件和当前工程的文件看作在一个文件中,共享作用域,可以直接调用引入文件的变量,对象,方法。。。

     

    所以,在我们引入萤石云的js文件之后,它的功能是执行自己的视频,对外开放一个对象EZUIPlayer,我们就在externals中引入这个对象,在需要使用它的文件中import EZUIPlayer from ‘EZUIPlayer’ ,接下来就参考官方的例程,直接调用执行即可。

     

    举一反三,触类旁通,比如百度地图,echart图表,很多的第三方依赖库都可以这样用。

    展开全文
  • 看到有人误解externals的作用,所以必须先正确认识externals的作用 1.作用 首先webpack提供这个==externals==选项作用是==从打包的bundle文件中排除依赖==。换句话说就是让在项目中通过import引入的依赖在打包...

    排除误区:
    看到有人误解externals的作用,所以必须先正确认识externals的作用

    1.作用

    首先webpack提供这个==externals==选项作用是==从打包的bundle文件中排除依赖==。换句话说就是让在项目中通过import引入的依赖在打包的时候不会打包到bundle包中去,而是通过script的方式去访问这些依赖。

    2.怎么用?

    以jquery为例子,目的是在runtime时通过cdn获取jquery依赖,在打包时忽略他的打包

    步骤一:

    //index.html
    <script
      src="https://code.jquery.com/jquery-3.1.0.js"
      integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
      crossorigin="anonymous">
    </script>

    步骤二:

    //webpack.config.js
    
    module.exports = {
      //...
      externals: {
        jquery: 'jQuery' 
        //将需要忽略打包的都写在这个里面,但前提是index.html文件里面必须script引入
      }
    };
    //属性名jquery指的是  import  $ from 'jquery'中的  'jquery'
    属性值 jQuery指的是jquery插件暴露出来的全局对象名。按理来说$应该也是可以写在属性值里面的,(也是jquery暴露的啊,但我没试过行不行)。

    步骤三:

    文件中的
    import $ from 'jquery';
    千万不能去掉。  很重要,好多人就是把它去掉了跑过来问我为啥我的还是报错jquery is  undefined。  

    laravel+vue项目中怎么使用externals

    两步曲:
    1.

    //webpack.mix.js
    
    let mix = require('laravel-mix');
    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
    mix.webpackConfig({
        plugins: [
          // new BundleAnalyzerPlugin(),
        ],
        externals: {
            'vue' : 'Vue',
            'vuex' : 'Vuex',
            'vue-router' : 'VueRouter',
            'element-ui' : 'Element',
            'lodash' : '_',
            'jquery' : 'jQuery',
            'axios' : 'axios',
        }
      }).js('resources/assets/js/app.js', 'public/js')
        .sass('resources/assets/sass/app.scss', 'public/css')
        .extract(['vue','vuex',])
        .styles(['node_modules/element-ui/lib/theme-chalk/index.css'], 'public/css/element-ui.css');

    2.

    //welcome.blade.php
    
    外部引入cdn的地址
          <script src="//cdn.bootcss.com/vue/2.5.7/vue.min.js"></script>
          <script src="//cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
          <script src="//cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
          <script src="//cdn.bootcss.com/element-ui/2.2.0/index.js"></script>
          <script src="//cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
          <script src="//cdn.bootcss.com/axios/0.17.0/axios.min.js"></script>
          <script src="//cdn.bootcss.com/lodash.js/4.17.4/lodash.min.js"></script>
          <script src="{{ mix('js/manifest.js') }}"></script>
          <script src="{{ mix('js/vendor.js') }}"></script>
          <script src="{{ mix('js/app.js') }}"></script>
    展开全文
  • svn-强行忽略与externals

    2013-12-12 08:45:55
    提交文件,强行添加SVN忽略的文件 svn add * --force 提交文件 svn commit -m "注释" 编辑外部引用,其中最后一个参数是文件名 svn pe svn:externals externals
  • 1. 2.
  • Webpack的externals的理解

    2020-04-27 10:52:56
    webpack官网介绍: ...webpack的externals 上面的信息是什么意思呢? 你可以通过script方式引入后,在文件中直接使用$这里是没有问题的,如果你使用了eslint,它会提示你该变量未定义。但是如果...
  • 首先webpack提供这个==externals==选项作用是==从打包的bundle文件中排除依赖==。换句话说就是让在项目中通过import引入的依赖在打包的时候不会打包到bundle包中去,而是通过script的方式去访问这些依赖。 2.怎么用...
  • webpack externals

    2020-08-14 16:58:34
    webpack externals详解 在众多的webpack配置教程中,对externals这个配置选项,总是一带而过,把文档中提到的几种方式都复述一遍,但是对于开发者而言,根本没法完全理解。本文试图通过一整篇文章,详细的对...
  • Webpack4 配置 Externals

    千次阅读 2019-09-05 12:23:06
    Externals 配置项用来告诉 Webpack 要构建的代码中使用了哪些不用被打包的模块,也就是说这些模版是外部环境提供的,Webpack 在打包时可以忽略它们。 1.有些 JavaScript 运行环境可能内置了一些全局变量或者模块,...
  • <arg line="ps svn:externals . -F E:\Dailybuild\deployForDelta\text.txt"/> </exec> 然后在T档里面,我把要加的虚拟目录和对应的svn路径填进去了: Res\Txt https://raphael-PC1.****....
  • 按照官方文档的解释,如果我们想引用一个库,但是又不想让webpack打包,并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用,那就可以通过配置externals。这个功能主要是用在创建一个库的时候...
  • 为什么要配置externals 官网解释: webpack 中的 externals 配置提供了不从 bundle 中引用依赖的方式。解决的是,所创建的 bundle 依赖于那些存在于用户环境(consumer environment)中的依赖。 怎么理解呢,意思...
  • 建议在github阅读,并欢迎提出问题讨论1.webpack中的externals vs libraryTarget vs library我们的目的只有一个,那就是编译script标签上的模块来使用。下面的例子有两个条件:1.我们的模块依赖于jQuery,但是我们不...
  • rocketmq-externals.zip

    2020-01-09 18:42:32
    自己编译好的rocketmq-externa文件,...nohup java -jar /usr/local/rocketmq-externals/rocketmq-console/target/rocketmq-console-ng-1.0.0.jar --server.port=8080 --rocketmq.config.namesrvAddr=0.0.0.0:9876 &
  • 学会使用svn:externals

    万次阅读 2011-07-05 08:59:14
    最近在与人合作的项目中使用了Zend Framework。为保证项目稳定性和方便发布,合作者把框架导出(export)到他的版本库然后提交(check in)。因为ZF框架的文件大量频繁的更新,他放弃了从框架版本库导出(export)的本地...
  • 在做硕士毕业设计的时候,用到随机森林这个模型,在写完代码的时候,跑的时候,老是出现sklearn.externals.joblib.externals.loky.process_executor.BrokenProcessPool: A task has failed to un-serialize....
  • 开源的rocketmq-externals项目 找到rocketmq-console,先编辑一下rocketmq-console里面的application.properties文件,将项目使用的rocketmq.config.namesrvAddr配置上去(或者在项目启动时,以参数的形式配进去)
  • webpack-externals过滤文件

    千次阅读 2016-12-29 12:09:18
    { "babel-core" :"commonjs babel-core", "babel-loader" :"commonjs babel-loader", "body-parser" :"commonjs body-parser", "cookie-parser" :"commonjs cookie-parser", "debug" :"commonjs debug
  • rocketmq-externals-master.zip rocketmq源码解析,最权威的rocketMQ源码大全

空空如也

1 2 3 4 5 ... 20
收藏数 13,355
精华内容 5,342
关键字:

externals