tutorial - Cómo utilizar una biblioteca desde un CDN en un proyecto de Webpack en producción
webpack vs gulp (3)
Me gustaría usar react.min.js desde un CDN en producción (por ejemplo, https://unpkg.com/[email protected]/dist/react.min.js )
¿Cuál es la mejor manera de hacer que Webpack transforme mi import React from ''react'' declaraciones import React from ''react'' en const React = window.React lugar de construir node_modules/react en el paquete?
Lo he estado haciendo con resolve.alias como esta:
En index.html :
<head>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
<script type="text/javascript" src="/assets/bundle.js"></script>
</head>
En webpack.prod.config.js :
alias: {
react$: ''./getWindowReact'',
},
getWindowReact.js :
module.exports = window.React;
Nota : En la pregunta anterior, no me di cuenta de que construir React en un paquete de NODE_ENV=production con NODE_ENV=production eliminaría las comprobaciones de los propTypes . Una de las respuestas se centra en eso.
Creé https://github.com/mastilver/dynamic-cdn-webpack-plugin que está haciendo exactamente eso fuera de la caja
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()
]
}
Agregará dinámicamente las direcciones URL de unpkg.org y agregará el código apropiado en su paquete para cargar las bibliotecas de global
En la configuración de su paquete web puede usar la opción de elementos externals que importará el módulo del entorno en lugar de intentar resolverlo normalmente:
// webpack.config.js
module.exports = {
externals: {
''react'': ''React''
}
...
};
Lea más aquí: https://webpack.js.org/configuration/externals/
Todas las partes del código de React solo para desarrollo, como las comprobaciones PropType, están protegidas con:
if ("production" !== process.env.NODE_ENV) {
..
}
Para eliminarlos de React en su propia compilación, creando el equivalente de la compilación React minificada en su propio paquete, use DefinePlugin para reemplazar las referencias a process.env.NODE_ENV con "production" .
plugins: [
// ...
new webpack.DefinePlugin({
''process.env.NODE_ENV'': JSON.stringify(''production'')
}),
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false
}
})
// ...
],
La eliminación del código muerto de Uglify luego lo eliminará todo, ¡ya que detectará que el código envuelto con una "production" !== "production" control de "production" !== "production" es inalcanzable.