使用「webpack」中的「外部」從CDN加載

我是reactjs和webpack中的新成員。我想在我的項目中使用外部webpack加載CDN庫，如https://webpack.js.org/configuration/externals/#externals 中的示例，但它不起作用。你能幫助我嗎？使用「webpack」中的「外部」從CDN加載

這是我的index.html

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<link rel="manifest" href="%PUBLIC_URL%/manifest.json"> 
<link rel="stylesheet" href="https://cdn.cdncode.com/twitter- bootstrap/3.3.7/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://cdn.cdncode.com/bootstrap-rtl/3.2.0-rc2/css/bootstrap-rtl.min.css"/> 
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> 
</head> 
<body class="content_main"> 
<div id="root"></div> 
<script type="text/javascript" src="https://cdn.cdncode.com/jquery/3.1.1/jquery.min.js"></script> 
<script type="text/javascript" src="https://cdn.cdncode.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script type="text/javascript" src="https://cdn.cdncode.com/html5shiv/r29/html5.min.js"></script> 
<script type="text/javascript" src="https://cdn.cdncode.com/respond.js/1.4.2/respond.min.js"></script> 
     </script> 
</body> 
</html>

，這是我webpack.config.js

const webpack = require('webpack'); 
const path = require('path'); 

module.exports = { 
entry: "./src/index.js", 
output: { 
    path: "/js/", 
    publicPath: 'http://jwplayer.k-cdn.net/', 
    filename: "bundle.js" 
}, 
module: { 
    loaders: [ 
     {test: /\.js$/, loader: 'babel-loader', query: {presets: ['es2015', 'react']}}, 
     {test: /\.css$/, loader: 'style-loader!css-loader'}, 
     {test: /\.(png|svg|jpg|gif)$/, loader: 'file-loader'}, 
     {test: /\.(woff|woff2|eot|ttf|otf)$/, loader: 'file-loader'} 
    ] 
}, 
resolve: { 
    extensions: ['.js'] 
}, 
externals: { 
    jquery: 'jQuery' 
} 
};

來源

2017-07-29 Rana Nematollahi

你得到了什麼錯誤？ –

我使用從'jquery'導入$;在我的其中一個組件，我得到這個錯誤模塊未找到：無法解析'C：\ Users \ PC-R-Nematollahi \ Desktop \ livez-react \ src \ components \ channels'中的'jquery' –

要執行的JQuery$功能爲React，我做以下步驟。

1）從npm

npm install --save jquery

2）變化webpack.config.js安裝JQuery，刪除external，加plugins

module.exports = { 
entry: "./src/index.js", 
output: { 
    path: "/js/", 
    publicPath: 'http://jwplayer.k-cdn.net/', 
    filename: "bundle.js" 
}, 
module: { 
    loaders: [ 
     {test: /\.js$/, loader: 'babel-loader', query: {presets: ['es2015', 'react']}}, 
     {test: /\.css$/, loader: 'style-loader!css-loader'}, 
     {test: /\.(png|svg|jpg|gif)$/, loader: 'file-loader'}, 
     {test: /\.(woff|woff2|eot|ttf|otf)$/, loader: 'file-loader'} 
    ] 
}, 
resolve: { 
    extensions: ['.js'] 
}, 
plugins: [ 
    new webpack.ProvidePlugin({ 
     $: "jquery", 
    }), 
] 
};

現在我們可以使用$在陣營

來源

2017-07-29 12:26:47

其他如何在我的反應項目中將cdn中的任何庫導入爲全局文件？某些圖書館沒有任何npm模塊或類似的東西 –

看看這個[鏈接]（https://stackoverflow.com/questions/33250174/how-to-use-webpack-to-load-cdn-or-external -vendor-JavaScript的LIB-在-JS-文件未）。我認爲這會幫助你。 –

使用「webpack」中的「外部」從CDN加載

回答

相關問題