Comment utiliser une bibliothèque D'un CDN dans un projet Webpack en production
j'aimerais utiliser react.min.js
à partir d'un CAN à la production (par exemple,https://unpkg.com/react@15.3.1/dist/react.min.js)
Quelle est la meilleure façon d'obtenir Webpack de transformer ma import React from 'react'
énoncés dans const React = window.React
au lieu de construire node_modules/react
dans le paquet?
j'ai fait ça avec resolve.alias
comme ceci:
index.html
:
<head>
<script type="text/javascript" src="https://unpkg.com/react@15.3.1/dist/react.min.js"></script>
<script type="text/javascript" src="/assets/bundle.js"></script>
</head>
Dans webpack.prod.config.js
:
alias: {
react$: './getWindowReact',
},
getWindowReact.js
:
module.exports = window.React;
Remarque:: dans l'ancienne question, je n'avais pas réalisé que le bâtiment réagissait en un paquet Webpack avec NODE_ENV=production
dépouiller le propTypes
vérifie. Une des réponses se concentre sur.
3 réponses
dans votre configuration webpack vous pouvez utiliser le externals
option qui importera le module depuis l'environnement au lieu d'essayer de le résoudre normalement:
// webpack.config.js
module.exports = {
externals: {
'react': 'React'
}
...
};
Lire la suite ici: https://webpack.js.org/configuration/externals/
j'ai créé https://github.com/mastilver/dynamic-cdn-webpack-plugin qui est exactement ce que fait hors de la boîte
const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const DynamicCDNWebpackPlugin = require('dynamic-cdn-webpack-plugin')
module.exports = {
entry: './main.js',
output: {
path: path.join(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
plugins: [
new HTMLWebpackPlugin(),
new ModulesCDNWebpackPlugin()
]
}
ajouter dynamiquement unpkg.org url et ajouter le code approprié dans votre bundle pour charger les librairies à partir de global
toutes les parties de la base de données React qui ne concernent que le développement, telles que les vérifications de PropType, sont gardées avec:
if ("production" !== process.env.NODE_ENV) {
..
}
pour les supprimer de React dans votre propre compilation, créant l'équivalent de la miniature de React dans votre propre compilation, utilisez DefinePlugin
pour remplacer les références à process.env.NODE_ENV
"production"
.
plugins: [
// ...
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false
}
})
// ...
],
L'élimination du code mort D'Uglify va alors tout enlever, comme il va détecter ce code enveloppé d'un "production" !== "production"
cocher est inaccessible.