javascript - Demandez des conseils sur l'utilisation de CDN avec Vue

Question

S'il vous plaît dites-moi, {code...} Comment utiliser cdn pour référencer un fichier js public comme celui-ci. Actuellement, il est installé par npm install, tous sont locaux et les exportations sont limitées. De nombreux packages peuvent être importés à l'aide de cdn. Mais actuellement, ils sont tous exploités par le framework Vue, et il n'y a pas de lieu d'écriture directement importé depuis HTML. ...

ringa_lee · Answer

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
  },
  externals: {
      jquery: 'jQuery.noConflict()', //或者jquery:'jQuery',
      $: 'jQuery.noConflict()'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
    }

Webpack est configuré comme ceci, le HTML introduit le jquery de cdn


  
  
  
  lawyer_fe

女神的闺蜜爱上我 · Answer

Importez-le simplement directement dans html 里中从 CDN, il n'est pas nécessaire de l'importer et de le conditionner/compresser ensemble

大家讲道理 · Answer

Si la bibliothèque tierce possède une adresse CDN, celle-ci peut être directement introduite dans le HTML, dans le HTML du template.
Ensuite, vous pouvez également envoyer le code sur votre propre cdn, le gérer de manière uniforme et le traiter de la même manière que vos autres fichiers statiques. Par exemple, vos fichiers img sont placés dans cdnUrl+projectName/img/, et ces tiers. les bibliothèques du parti y sont également lancées.
Vous êtes actuellement géré par le package npm localement, donc si vous l'importez lorsque vous le citez, il sera certainement packager par webpack... Cela implique la question du webpack. Voyons si nous pouvons d’abord résoudre le problème actuel

高洛峰 · Answer

Vous pouvez consulter la documentation du webpack. Elle est écrite dans la documentation, qui est assez détaillée. Prenez jQuery comme exemple

.

https://doc.webpack-china.org...

淡淡烟草味 · Answer

La résolution de votre problème nécessite les étapes suivantes
1. Extrayez les fichiers js installés localement par npm et introduits via l'importation. Cette partie peut être extraite via le plug-in CommonsChunkPlugin.

Par exemple :

entry: {
    main:['./src/index.js'],
    vue:['vue'],
    jquery:['jquery']    
  }
...
plugins: [
    new webpack.optimize.CommonsChunkPlugin({
          name: ['vue','jquery'], // 指定公共 bundle 的名字。
          minChunks: function(module){
            return module.context && module.context.indexOf("node_modules") !== -1;
        }
      })
]

2. Utilisez HtmlWebpackPlugin pour résoudre le problème du chemin et du nom de fichier après l'empaquetage js

    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html',//模板路径
            inject: true,
            hash:true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
                // more options:
                // https://github.com/kangax/html-minifier#options-quick-reference
           }
       })
   ]

以上资源路径配置在output项

// webpack.config.js
output: {
    ...
    publicPath: debug ? 'build/' : 'https://cdn.bootcss.com/element-ui'
}

L'effet final généré est comme ça

// 生产环境
// a.html

Votre problème réside principalement dans l'extraction des fichiers js publics ci-dessus. Après l'extraction, c'est un choix personnel d'utiliser HtmlWebpackPlugin pour ajouter automatiquement des chemins de ressources ou de les ajouter manuellement, l'accent est donc mis sur la première étape