汇总不排除排除的包

Posted 2023-03-07

【中文标题】汇总不排除排除的包

【英文标题】：Rollup not excluding excluded packages

【发布时间】：2018-11-10 19:28:47

【问题描述】：

我正在使用 Rollup 来捆绑多个 React 组件。组件的样式使用styled-components。我在options.external 数组中包含了styled-components、react 和其他一些包。

当我将我的组件导入我的其他应用程序时，我遇到了一个错误，指出 styled-components 在页面上被实例化了两次。在我看来，这是与我的汇总配置或汇总本身有关的问题，因为在运行构建过程时我得到了一些令人困惑的输出。

汇总配置/构建文件：

const babel = require('rollup-plugin-babel');
const commonjs = require('rollup-plugin-commonjs');
const nodeResolve = require('rollup-plugin-node-resolve');
const replace = require('rollup-plugin-replace');
const sass = require('rollup-plugin-sass');
const autoprefixer = require('autoprefixer');
const path = require('path');
const rollup = require('rollup');

const cwd = process.cwd();
const  name, moduleName  = require(path.join(cwd, 'package.json'));

const build = opts => 
  rollup
    .rollup(
      input: opts.input || 'src/index.js',
      external: [
        'react',
        'react-proptypes',
        'styled-components',
      ],
      output: 
        globals: 
          'react': 'React',
          'react-proptypes': 'PropTypes',
          'styled-components': 'styled',
        
      ,
      globals: 
        'react': 'React',
        'react-proptypes': 'PropTypes',
        'styled-components': 'styled',
      ,
      plugins: [
        babel(
          exclude: 'node_modules/**',
          plugins: ['external-helpers']
        ),
        sass(
          insert: false,
          output: false,
          include: '**/*.scss',
          exclude: [],
          options: 
            importer( url /*, prev */ ) 
              if ( url.startsWith( '~' ) ) 
                const path = process.cwd() + '/node_modules/' + url.slice( 1 );

                return 
                  file: path
                ;
              
            
          
        ),
        nodeResolve(
          jsnext: true
        ),
        commonjs(
          include: 'node_modules/**',
          namedExports: 
            './node_modules/react/react.js': [
              'cloneElement',
              'createElement',
              'PropTypes',
              'Children',
              'Component'
            ]
          
        ),
        replace(
          'process.env.NODE_ENV': JSON.stringify('production')
        )
      ]
    )
    .then(bundle => 
      const format = opts.format || 'umd';
      const formatMod = opts.formatMod || format;
      const exports = opts.exports || 'named';
      const dest = `dist/$name.$formatMod.js`;

      console.log(dest);
      bundle.write(
        exports,
        format,
        name: moduleName || name,
        file: dest
      );
    )
    .catch(err => 
      console.error(err);
    );
;

build(
  format: 'umd'
);

build(
  format: 'es',
  formatMod: 'esm'
);

build(
  format: 'cjs'
);

简单组件：

import React from 'react';
import styled from 'styled-components';

const StyledTest = styled.div`
  font-size: 24px;
  color: red;
  font-family: sans-serif;
`;

const Test = ( children ) => (
  <StyledTest>children</StyledTest>
);

export default Test;

编译的简单组件：

import React from 'react';
import styled from 'styled-components';

var taggedTemplateLiteral = function (strings, raw) 
  return Object.freeze(Object.defineProperties(strings, 
    raw: 
      value: Object.freeze(raw)
    
  ));
;

var _templateObject = taggedTemplateLiteral(['\n  font-size: 24px;\n  color: red;\n  font-family: sans-serif;\n'], ['\n  font-size: 24px;\n  color: red;\n  font-family: sans-serif;\n']);

var StyledTest = styled.div(_templateObject);

var Test = function Test(_ref) 
  var children = _ref.children;
  return React.createElement(
    StyledTest,
    null,
    children
  );
;

export default Test;

我从汇总中观察到的令人困惑的错误如下：

The following options have been renamed — please update your config: globals -> output.globals
The following options have been renamed — please update your config: globals -> output.globals
The following options have been renamed — please update your config: globals -> output.globals
dist/@vz-react/test.umd.js
dist/@vz-react/test.esm.js
dist/@vz-react/test.cjs.js
No name was provided for external module 'react' in options.globals – guessing 'React'
No name was provided for external module 'styled-components' in options.globals – guessing 'styled'

尽管定义了options.globals 和options.output.globals，但我看到了这些错误。如果我删除 options.globals，我不再收到要求我将 options.globals 移动到 options.output.globals 的错误，但我仍然收到以下错误。

软件包版本：

"rollup": "^0.59.4",
"styled-components": "^3.2.5",

【参考方案1】：

我已经这样声明了我的外部：

const externals = 
  'react' : 'React',
  'react-dom' : 'ReactDOM',
  'react-scripts' : 'ReactScripts',
;

然后将变量的键添加到汇总配置的默认导出中。

  external: Object.keys(externals),

这应该可以帮助您摆脱警告（：

【参考方案2】：

重新阅读（样式组件常见问题解答）[https://www.styled-components.com/docs/faqs#why-am-i-getting-a-warning-about-several-instances-of-module-on-the-page] 我意识到我有一个重复的styled-components 模块。

我通过在我的 webpack 配置中添加以下内容解决了这个问题：

  resolve: 
+   modules: [path.resolve(appFolder, 'node_modules'), 'node_modules'],
  

我仍然不确定为什么我会从 Rollup 收到这些警告，但样式化组件的问题不再是问题。

???