我想在制作中使用CDN中的react.min.js
(例如https://unpkg.com/react@15.3.1/dist/react.min.js)
让Webpack将import React from 'react'
语句转换为const React = window.React
而不是将node_modules/react
构建到捆绑包中的最佳方法是什么?
我一直在用resolve.alias
这样做:
在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>
在webpack.prod.config.js
:
alias: {
react$: './getWindowReact',
},
getWindowReact.js
:
module.exports = window.React;
注意:在旧的问题中,我没有意识到将React构建到带有NODE_ENV=production
的Webpack包中会剥离propTypes
检查。其中一个答案侧重于此。
答案 0 :(得分:25)
在您的webpack配置中,您可以使用externals
选项,该选项将从环境中导入模块,而不是尝试正常解析它:
// webpack.config.js
module.exports = {
externals: {
'react': 'React'
}
...
};
答案 1 :(得分:9)
我创建了https://github.com/mastilver/dynamic-cdn-webpack-plugin,这正是开箱即用的
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()
]
}
将动态添加unpkg.org网址并在您的包中添加相应的代码以从global
答案 2 :(得分:4)
React代码库的所有仅开发部分(例如PropType检查)都受到以下保护:
if ("production" !== process.env.NODE_ENV) {
..
}
要从您自己的构建中的React中删除它们,在您自己的包中创建相当于缩小的React构建,请使用DefinePlugin
将process.env.NODE_ENV
的引用替换为"production"
。< / p>
plugins: [
// ...
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false
}
})
// ...
],
Uglify的死代码消除会将其全部删除,因为它会检测到包含"production" !== "production"
检查的代码无法访问。