1

所以我在前端使用 JS，为客户构建一些东西。细节不是很重要，只是我无权访问节点。

我正在使用 unpkg 在浏览器中包含各种 NPM 包（例如 React/ReactDOM/Babel）。这些软件包具有 UMD 构建，因此它们可以开箱即用。

但是，我想使用一些没有 UMD 构建的包（即 react-dates 或 react-datepicker）。我尝试通过 unpkg 提供不同的文件并引用导出的模块。由于他们没有 UMD 构建，我会得到一个module is not defined有意义的错误，或者我正在引用的模块DatePicker is not defined.

所以我想也许我可以用 browserify 构建一个文件，但我以前从未使用过它，而且我能找到的任何文档都缺乏。这是我所做的

var DatePicker = require("react-dates");

在名为 test.js 的文件中，然后：

browserify test.js -o bundle.js

输出，将其上传到客户端资产，像这样引用它：

<script src="/js/bundle.js"></script>

但是var DatePicker = require("DatePicker")会抛出错误require is not defined（我认为那是 browserify 的重点？）并且也会console.log(DatePicker)抛出错误is not defined。

在这一点上，我不知所措。我很固执，但我真的只是想使用一个反应日期选择器，并避免为了日期选择器的唯一目的而将 jQuery 添加到这个项目中。据我所知， unpkg 不是一个选项，但我觉得 browserify 可以工作，我只是做错了。

任何帮助是极大的赞赏！

4

1 回答 1

2

您不必这样做，您可以在文件夹中“npm install react-datepicker”之后在 dist 文件夹（新文件夹\node_modules\react-datepicker）中找到所需的文件，但请确保您有一个包文件进去，否则安装将无法正常工作。

文件应如下所示

在此处输入图像描述

编辑：

您需要的requirejs代码是

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script>

<script>
    requirejs.config({
        paths: {
            'react': 'https://unpkg.com/react@15.3.2/dist/react',
            'react-dom': 'https://unpkg.com/react-dom@15.3.2/dist/react-dom',
            'prop-types': 'https://unpkg.com/prop-types@15.6.0/prop-types',
            'react-onclickoutside': 'https://unpkg.com/react-onclickoutside@6.7.0/dist/react-onclickoutside',
            'react-popper': 'https://unpkg.com/react-popper@0.7.4/dist/react-popper',
            'moment': 'https://unpkg.com/moment@2.19.3/moment',
            'datepicker': 'https://unpkg.com/react-datepicker@0.61.0/dist/react-datepicker'
        }
    });

    requirejs(['react', 'react-dom', 'prop-types', 'react-onclickoutside', 'react-popper', 'moment', 'datepicker'], function(React, ReactDOM, PropTypes, onClickOutside, Popper, moment, DatePicker) {
        ReactDOM.render(
            React.createElement('p', {}, 'Hello, World!'),
            document.getElementById('root')
        )
    });

但据我所知，datepicker 请求了未定义的“模块”，这可能与这里的问题相同。我将对此问题进行更多调查。

于 2017-11-30T21:01:47.443 回答