import dayjs from 'dayjs';
在 src目录下 使用是没有问题的。
在node_modules里面有个rc-picker 中也有import dayjs from 'dayjs';
但dayjs 是undefined;
导致 antd 的DatePicker不能用。
同样的代码在create-react-app 是可以使用的。觉得应该是webpack问题,不知道该怎么处理。
/** 这是用于开发环境的webpack配置文件 **/
const path = require("path"); // 获取绝对路径用
const webpack = require("webpack"); // webpack核心
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 动态生成html插件
const CopyPlugin = require("copy-webpack-plugin"); // 用于直接复制public中的文件到打包的最终文件夹中
const HappyPack = require("happypack"); // 多线程编译
const AntdDayjsWebpackPlugin = require("antd-dayjs-webpack-plugin");
const PUBLIC_PATH = "/"; // 基础路径
module.exports = {
mode: "development",
entry: [
"webpack-hot-middleware/client?reload=true&path=/__webpack_hmr", // webpack热更新插件,就这么写
"./src/index.js", // 项目入口
],
output: {
path: __dirname + "/", // 将打包好的文件放在此路径下,dev模式中,只会在内存中存在,不会真正的打包到此路径
publicPath: PUBLIC_PATH, // 文件解析路径,index.html中引用的路径会被设置为相对于此路径
filename: "bundle-[contenthash].js", // 编译后的文件名字
},
devtool: "inline-source-map", // 报错的时候在控制台输出哪一行报错
optimization: {
splitChunks: {
chunks: "all",
},
},
module: {
rules: [
// {
// 编译前通过eslint检查代码 (注释掉即可取消eslint检测)
// test: /\.js?$/,
// enforce: "pre",
// use: ["eslint-loader"],
// include: path.resolve(__dirname, "src"),
// },
{
// .js .jsx用babel解析
test: /\.js?$/,
use: ["happypack/loader"],
exclude: /node_modules/
},
{
// .css 解析
test: /\.css$/,
use: ["style-loader", "css-loader", "postcss-loader"],
},
{
// .less 解析
test: /\.less$/,
use: [
"style-loader",
"css-loader",
"postcss-loader",
{
loader: "less-loader",
options: { lessOptions: { javascriptEnabled: true } },
},
],
},
{
// 文件解析
test: /\.(eot|woff|otf|svg|ttf|woff2|appcache|mp3|mp4|pdf)(\?|$)/,
include: path.resolve(__dirname, "src"),
use: [
{
loader: "file-loader",
options: {
name: "assets/[name].[hash:4].[ext]",
},
},
],
},
{
// 图片解析
test: /\.(png|jpg|jpeg|gif)$/i,
include: path.resolve(__dirname, "src"),
use: [
{
loader: "url-loader",
options: {
limit: 8192,
name: "assets/[name].[hash:4].[ext]",
},
},
],
},
{
// wasm文件解析
test: /\.wasm$/,
include: path.resolve(__dirname, "src"),
type: "webassembly/experimental",
},
{
// xml文件解析
test: /\.xml$/,
include: path.resolve(__dirname, "src"),
use: ["xml-loader"],
},
],
},
plugins: [
new AntdDayjsWebpackPlugin(),
new webpack.HotModuleReplacementPlugin(), // 热更新插件
new webpack.DefinePlugin({
"process.env": "dev",
}),
new HappyPack({
loaders: ["babel-loader"],
}),
new HtmlWebpackPlugin({
}),
// 拷贝public中的文件到最终打包文件夹里
new CopyPlugin({
patterns: [
{
from: "./public/**/*",
to: "./",
globOptions: {
// ignore: ["**/favicon.png", "**/index.html"],
},
noErrorOnMissing: true,
},
],
}),
],
resolve: {
preferRelative:true,
extensions: [".js", ".jsx", ".less", ".css", ".ts"], //后缀名自动补全
alias: {
crypto:false,
"@": path.resolve(__dirname, "src"),
},
},
};
//.babrlrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": [
"@babel/plugin-transform-runtime",
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-syntax-dynamic-import",
["@babel/plugin-proposal-decorators", { "legacy": true }],
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-optional-chaining",
"@babel/plugin-proposal-nullish-coalescing-operator",
"react-loadable/babel",
[
"import",
{
"libraryName": "antd",
"style": true
}
]
]
}