react.js - react组件打包时怎么去除第三方库？

问题描述

问 题

1、我想用webpack打包一个react组件，想在打包的时候把第三方库如（react、react-dom、jquery等）去除。这个在webpack中要怎么配置才好？
我原本这样配：

//webpack.config.js
externals = {
        "react": true,
        "react-dom": true,
        "jquery": true
    }

这样虽然可以在打包时把这三个去掉，但是我在其他地方用的时候就会报react is not defined，
想问一下我应该怎么做才能达到我想要的效果呢？
2、下面是我写的组件的一部分：

import React from "react";
import Item from "./components/Item";
import classnames from "classnames";
import $ from "jquery";


class Menu extends React.Component{
     ...   
}

export default Menu;

解决方案

把自己的解决方案贴出来把：
需要配置输出方式：

output: {
        path: path.resolve(__dirname, "dist"),
        filename: "components.js",
        libraryTarget: "umd",
        library: "Menu"
    }

还有externals应该是这样才是正确的：

externals: {
    "react": 'react',
    "jquery": 'jquery',
    'react-dom': 'ReactDOM'
}

这篇关于react.js - react组件打包时怎么去除第三方库？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！