Question

我是不熟悉汇总功能的人，因此在使用现有库时遇到了很多问题。当前的结构是，我有一个使用汇总捆绑在一起的库（称为mylib）。我在使用create-react-app创建的应用程序中使用了它，因此本质上是一个Webpack应用程序。当我在yarn start中进行myapp时，出现以下错误

Module not found: Can't resolve './main' in '/home/rohan/projects/mylib/dist'

我看到了很多这样的错误弹出窗口，而我通常的调试来源是简单地打开生成的包并检查它。原来有两个require呼叫：

var transportList = require('./transport-list');
module.exports = require('./main')(transportList);

稍后快速进行github搜索，该搜索来自sockjs-client。因此，看来rollup-plugin-commons软件包并没有为sockjs-client转换CommonJS软件包。为了验证这仅是该依赖性的问题，我尝试在rollup.config.js中执行以下操作：

commonjs({
    include: 'node_modules/sockjs-client/**'
}),

正如预期的那样，生成的捆绑包现在也有几个其他的require调用，因为其他一些CommonJS模块没有被转换为ES6模块。将其更改回：

commonjs({
    include: 'node_modules/**'
}),

或根本不提include似乎并没有摆脱require的这个孤独的sockjs-client呼吁。另外，这是整个生成的包中唯一的require调用。

作为参考，这是我的整个rollup.config.js：从“ rollup-plugin-node-resolve”导入解析从'rollup-plugin-commonjs'导入commonjs 从“ rollup-plugin-sourcemaps”导入sourceMaps 从'lodash.camelcase'导入camelCase 从“ rollup-plugin-typescript2”导入打字稿从'rollup-plugin-json'导入json 从'rollup-plugin-node-builtins'导入buildins 从“ rollup-plugin-node-globals”导入全局变量

const pkg = require('./package.json')

const libraryName = 'mylib'

export default {
  input: `src/${libraryName}.ts`,
  output: [
    { file: pkg.main, name: camelCase(libraryName), format: 'umd', sourcemap: true },
    { file: pkg.module, format: 'es', sourcemap: true },
  ],
  // Indicate here external modules you don't wanna include in your bundle (i.e.: 'lodash')
  external: [
    'websocket'
  ],
  watch: {
    include: 'src/**',
  },
  plugins: [
    builtins(),
    globals(),

    resolve({
        browser: true
    }),

    commonjs({
        include: 'node_modules/**'
    }),

    typescript({ useTsconfigDeclarationDir: true }),

    json(),
    // Resolve source maps to the original source
    sourceMaps(),
  ],
}

此外，该库专门针对Web（节点还有另一个变体），因此需要browser: true。

使用sockjs-client

0 个答案: