reactjs - 将 React 与 Webpack 一起使用时未定义 Moment
问题描述
我正在“Reactifying”一个 PHP 应用程序,并且正在添加一个组件来启动(带有几个子组件)。除了自定义组件之外,还有几个库依赖项(react-bootstrap、moment 等)。
我正在使用 webpack 来编译它,它可以正确编译dist/main.js
并按预期生成。但是,当将它添加到 HTML 模板时,我收到错误 "moment is not defined",尽管 "react-bootstrap" 依赖项似乎可以正确加载。根据https://github.com/palantir/blueprint/issues/959中的指导,我尝试了这两种方法import * as moment from 'moment'
,import moment from 'moment'
以及const moment = require('moment');
我之前使用的那些在 browserify 中编译良好的方法。
webpack.config.js
const path = require('path')
module.exports = {
mode: 'development',
context: path.resolve(__dirname, 'components'),
entry: './dir/EntryComponent.app.jsx',
resolve: {
extensions: ['.jsx', '.json', '.js']
},
optimization: {
minimize: false
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
};
.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
组件.jsx
import Collapse from "react-bootstrap/Collapse";
import moment from 'moment';
const Datetime = require('react-datetime');
...
<label>Start</label>
<Datetime
value={this.props.startDate}
placeholder="Start Date"
dateFormat='YYYY-MM-DD'
timeFormat={false}
input={true}
viewDate={moment().subtract(1, 'month')}
onChange={date => this.props.updateStartDate(date)}
closeOnSelect={true}
closeOnTab={true}
viewMode="months"
inputProps={{readonly: 'readonly'}}/>
解决方案
推荐阅读
- python - 如何在 python 中使用 S3TC/DXT 算法压缩 PNG 图像?
- jasper-reports - 如何在 Jasper 报告中添加空的最大行?
- bash - 如何启动 mvn spring-boot:run 然后运行 wget?
- r - 如何计算定义为类对象“字符”的向量中的数字?
- docker - 运行整个 docker 容器,并将卷安装在内存中
- c# - 如何让 Service Fabric 反向代理在 Azure 上工作
- amazon-web-services - 如何将文件从 Google Cloud Instance 传输到 AWS Instance
- c - 为什么用 0 初始化数组会清除整个缓冲区?
- c# - 如何匹配字符串忽略大小写和重音?
- c# - 如果它为“null”,是否可以使用设置的 TargetNullValue 更新数据绑定源值?