0

我按照本指南使用 webpack + clojurescript，https: //clojurescript.org/guides/webpack 。使用or编译时它可以完美运行，但是当我使用挂钩的对象之一进行编译时，最终会被导入为未定义的对象，从而导致应用程序崩溃。:none:whitespace:advancedwindow

我尝试了几件事，比如定义和externs.js使用 window 对象，但我发现很难深入挖掘。

这是我的编译器参数：

{:source-paths ["src/cljs" "src/cljc" "env/prod/cljs"]
             :compiler
             {:output-to     "target/cljsbuild/public/js/app.js"
              :output-dir    "target/cljsbuild/public/js"
              :source-map    "target/cljsbuild/public/js/app.js.map"
              :optimizations :advanced
              :infer-externs true
              :pretty-print  false
              :npm-deps      false
              :foreign-libs [{:file "dist/index_bundle.js"
                              :provides ["react" "react-dom" "react-select" "react-table"]
                              :global-exports {react React
                                               react-dom ReactDOM
                                               react-select Select
                                               react-table ReactTable}}]}}

这是我的 index.js，webpack 的入口点

// Here we define what we need.
// Webpack is gonna use this and produce a bundle.
// cljs will read this bundle and provide the namespaces for us.
import React from 'react';
import ReactDOM from 'react-dom';
import Select from 'react-select';
import ReactTable from 'react-table'

window.React = React;
window.ReactDOM = ReactDOM;
window.Select = Select;
window.ReactTable = ReactTable

webpack 配置很简单

module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'index_bundle.js'
    }
}

我得到的错误是因为在这样的文件上：

(ns foo
  (:require
   [react-table :as ReactTable]
   [reagent.core :as r]
   [clojure.string :as str]))
[...]
(r/adapt-react-class ReactTable)

ReactTable 绑定到nil. 我可以确认在 js 控制台window.ReactTable上也是nil.

只需在编译器选项上更改:advanced为:whitespace，并将其他所有内容保持原样，即可解决问题。而在 js 控制台中，window.ReactTable不再是nil.

有任何想法吗？:)

----- 编辑（添加解决方法信息）--------

我发现这个用例的一种可能的解决方法是foreign-libs像这样“拆分”：

              :foreign-libs [{:file "dist/main.js"
                              :provides ["react" "react-dom" "react-select"]
                              :global-exports {react React
                                               react-dom ReactDOM
                                               react-select Select}}
                             {:file "dist/react_table.js"
                              :requires ["react" "react-dom"]
                              :provides ["react-table"]
                              :global-exports {react-table ReactTable}}]}}

调整 webpack 配置和入口点会创建两个单独的包，一个只包含一个包，ReactTable另一个包含所有其他包。我不认为这是一个解决方案，因为真正的问题没有被发现。但这样做可以解决问题。

4

1 回答 1

0

你肯定会遇到高级优化问题，弄乱你正在使用的库的名称，但根据你的用例，你可能根本不需要使用 Webpack（不确定这是否适合你）。

您使用的库似乎很受欢迎，可以包含在CLJSJS 项目中，因此如果您找到所需的版本，您可以将这些库作为常规依赖项添加到project.clj文件中，它应该可以正常工作。来自 CLJSJS 的包包括依赖信息和方便打包的 externs 文件。

最后，您可能在旧版本的 ClojureScript 中偶然发现了一个错误。检查您使用的是最新版本还是稍旧的版本。

于 2019-07-09T04:25:21.517 回答