Comments (10)
@shengliangli 刚才在别人那里重现了你的问题,发现是 vendor
中配置了 antd 的缘故,去掉即可。
from babel-plugin-import.
同样遇到这个问题,.babelrc文件中配置报错,在package.json中加入报告“you are using prebuild antd",在webpack.config.js中配置也报错,看了下问题日志各种能用的方法都尝试了但还是没有解决,我是用react starter kit生成的项目,猜测是webpack.config.js里面配置的一些问题吧,但自己又不太懂,希望有人能指点一下。
/**
- React Starter Kit (https://www.reactstarterkit.com/)
* - Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
* - This source code is licensed under the MIT license found in the
- LICENSE.txt file in the root directory of this source tree.
*/
import path from 'path';
import webpack from 'webpack';
import extend from 'extend';
import AssetsPlugin from 'assets-webpack-plugin';
const DEBUG = !process.argv.includes('--release');
const VERBOSE = process.argv.includes('--verbose');
const AUTOPREFIXER_BROWSERS = [
'Android 2.3',
'Android >= 4',
'Chrome >= 35',
'Firefox >= 31',
'Explorer >= 9',
'iOS >= 7',
'Opera >= 12',
'Safari >= 7.1',
];
const GLOBALS = {
'process.env.NODE_ENV': DEBUG ? '"development"' : '"production"',
DEV: DEBUG,
};
//
// Common configuration chunk to be used for both
// client-side (client.js) and server-side (server.js) bundles
// -----------------------------------------------------------------------------
const config = {
context: path.resolve(__dirname, '../src'),
output: {
path: path.resolve(__dirname, '../build/public/assets'),
publicPath: '/assets/',
sourcePrefix: ' ',
},
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
include: [
path.resolve(__dirname, '../node_modules/react-routing/src'),
path.resolve(__dirname, '../src'),
],
query: {
// https://github.com/babel/babel-loader#options
cacheDirectory: DEBUG,
// https://babeljs.io/docs/usage/options/
babelrc: false,
presets: [
'react',
'es2015',
'stage-0',
],
plugins: [
'transform-runtime',
...DEBUG ? [] : [
'transform-react-remove-prop-types',
'transform-react-constant-elements',
'transform-react-inline-elements',
],
],
},
},
{
test: /\.css/,
loaders: [
'isomorphic-style-loader',
`css-loader?${JSON.stringify({
sourceMap: DEBUG,
// CSS Modules https://github.com/css-modules/css-modules
modules: true,
localIdentName: DEBUG ? '[name]_[local]_[hash:base64:3]' : '[hash:base64:4]',
// CSS Nano http://cssnano.co/options/
minimize: !DEBUG,
})}`,
'postcss-loader?pack=default',
],
},
{
test: /\.scss$/,
loaders: [
'isomorphic-style-loader',
`css-loader?${JSON.stringify({ sourceMap: DEBUG, minimize: !DEBUG })}`,
'postcss-loader?pack=sass',
'sass-loader',
],
},
{
test: /\.json$/,
loader: 'json-loader',
},
{
test: /\.txt$/,
loader: 'raw-loader',
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
loader: 'url-loader',
query: {
name: DEBUG ? '[path][name].[ext]?[hash]' : '[hash].[ext]',
limit: 10000,
},
},
{
test: /\.(eot|ttf|wav|mp3)$/,
loader: 'file-loader',
query: {
name: DEBUG ? '[path][name].[ext]?[hash]' : '[hash].[ext]',
},
},
{
test: /\.jade$/,
loader: 'jade-loader',
},
],
},
resolve: {
root: path.resolve(__dirname, '../src'),
modulesDirectories: ['node_modules'],
extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', '.json'],
},
cache: DEBUG,
debug: DEBUG,
stats: {
colors: true,
reasons: DEBUG,
hash: VERBOSE,
version: VERBOSE,
timings: true,
chunks: VERBOSE,
chunkModules: VERBOSE,
cached: VERBOSE,
cachedAssets: VERBOSE,
},
postcss(bundler) {
return {
default: [
// Transfer @import rule by inlining content, e.g. @import 'normalize.css'
// https://github.com/postcss/postcss-import
require('postcss-import')({ addDependencyTo: bundler }),
// W3C variables, e.g. :root { --color: red; } div { background: var(--color); }
// https://github.com/postcss/postcss-custom-properties
require('postcss-custom-properties')(),
// W3C CSS Custom Media Queries, e.g. @Custom-Media --small-viewport (max-width: 30em);
// https://github.com/postcss/postcss-custom-media
require('postcss-custom-media')(),
// CSS4 Media Queries, e.g. @media screen and (width >= 500px) and (width <= 1200px) { }
// https://github.com/postcss/postcss-media-minmax
require('postcss-media-minmax')(),
// W3C CSS Custom Selectors, e.g. @custom-selector :--heading h1, h2, h3, h4, h5, h6;
// https://github.com/postcss/postcss-custom-selectors
require('postcss-custom-selectors')(),
// W3C calc() function, e.g. div { height: calc(100px - 2em); }
// https://github.com/postcss/postcss-calc
require('postcss-calc')(),
// Allows you to nest one style rule inside another
// https://github.com/jonathantneal/postcss-nesting
require('postcss-nesting')(),
// W3C color() function, e.g. div { background: color(red alpha(90%)); }
// https://github.com/postcss/postcss-color-function
require('postcss-color-function')(),
// Convert CSS shorthand filters to SVG equivalent, e.g. .blur { filter: blur(4px); }
// https://github.com/iamvdo/pleeease-filters
require('pleeease-filters')(),
// Generate pixel fallback for "rem" units, e.g. div { margin: 2.5rem 2px 3em 100%; }
// https://github.com/robwierzbowski/node-pixrem
require('pixrem')(),
// W3C CSS Level4 :matches() pseudo class, e.g. p:matches(:first-child, .special) { }
// https://github.com/postcss/postcss-selector-matches
require('postcss-selector-matches')(),
// Transforms :not() W3C CSS Level 4 pseudo class to :not() CSS Level 3 selectors
// https://github.com/postcss/postcss-selector-not
require('postcss-selector-not')(),
// Add vendor prefixes to CSS rules using values from caniuse.com
// https://github.com/postcss/autoprefixer
require('autoprefixer')({ browsers: AUTOPREFIXER_BROWSERS }),
],
sass: [
require('autoprefixer')({ browsers: AUTOPREFIXER_BROWSERS }),
],
};
},
};
//
// Configuration for the client-side bundle (client.js)
// -----------------------------------------------------------------------------
const clientConfig = extend(true, {}, config, {
entry: './client.js',
output: {
filename: DEBUG ? '[name].js?[chunkhash]' : '[name].[chunkhash].js',
chunkFilename: DEBUG ? '[name].[id].js?[chunkhash]' : '[name].[id].[chunkhash].js',
},
target: 'web',
plugins: [
// Define free variables
// https://webpack.github.io/docs/list-of-plugins.html#defineplugin
new webpack.DefinePlugin({ ...GLOBALS, 'process.env.BROWSER': true }),
// Emit a file with assets paths
// https://github.com/sporto/assets-webpack-plugin#options
new AssetsPlugin({
path: path.resolve(__dirname, '../build'),
filename: 'assets.js',
processOutput: x => `module.exports = ${JSON.stringify(x)};`,
}),
// Assign the module and chunk ids by occurrence count
// Consistent ordering of modules required if using any hashing ([hash] or [chunkhash])
// https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin
new webpack.optimize.OccurenceOrderPlugin(true),
...DEBUG ? [] : [
// Search for equal or similar files and deduplicate them in the output
// https://webpack.github.io/docs/list-of-plugins.html#dedupeplugin
new webpack.optimize.DedupePlugin(),
// Minimize all JavaScript output of chunks
// https://github.com/mishoo/UglifyJS2#compressor-options
new webpack.optimize.UglifyJsPlugin({
compress: {
screw_ie8: true, // jscs:ignore requireCamelCaseOrUpperCaseIdentifiers
warnings: VERBOSE,
},
}),
// A plugin for a more aggressive chunk merging strategy
// https://webpack.github.io/docs/list-of-plugins.html#aggressivemergingplugin
new webpack.optimize.AggressiveMergingPlugin(),
],
],
// Choose a developer tool to enhance debugging
// http://webpack.github.io/docs/configuration.html#devtool
devtool: DEBUG ? 'cheap-module-eval-source-map' : false,
});
//
// Configuration for the server-side bundle (server.js)
// -----------------------------------------------------------------------------
const serverConfig = extend(true, {}, config, {
entry: './server.js',
output: {
filename: '../../server.js',
libraryTarget: 'commonjs2',
},
target: 'node',
externals: [
/^./assets$/,
function filter(context, request, cb) {
const isExternal =
request.match(/^[@a-z][a-z/.-0-9]*$/i) &&
!request.match(/^react-routing/) &&
!context.match(/[/]react-routing/);
cb(null, Boolean(isExternal));
},
],
plugins: [
// Define free variables
// https://webpack.github.io/docs/list-of-plugins.html#defineplugin
new webpack.DefinePlugin({ ...GLOBALS, 'process.env.BROWSER': false }),
// Adds a banner to the top of each generated chunk
// https://webpack.github.io/docs/list-of-plugins.html#bannerplugin
new webpack.BannerPlugin('require("source-map-support").install();',
{ raw: true, entryOnly: false }),
],
node: {
console: false,
global: false,
process: false,
Buffer: false,
__filename: false,
__dirname: false,
},
devtool: 'source-map',
});
export default [clientConfig, serverConfig];
试过把里面的babelrc设置为true,但还是没用
from babel-plugin-import.
+1
from babel-plugin-import.
当 style 设为 less
或 true
时,这段代码会导致此插件失效:https://github.com/ant-design/antd-init/blob/1.1.0/boilerplates/plain-react/webpack.config.js#L21-L29
设为 css
时没有问题。
from babel-plugin-import.
@afc163 确定? 我们默认脚手架就是这个配置。
from babel-plugin-import.
应该不是吧,纯脚手架和业务项目里面都用过并没有出现这个问题。
from babel-plugin-import.
是做了 code spliting 就会出现的,是不是 babel-plugin-antd 没考虑到这种情况?
from babel-plugin-import.
搜了一下,这个字符串 You are using prebuilt antd
只在 dist/*.js
里存在,应该是 webpack.optimize.CommonsChunkPlugin 直接使用了,而没有做按需编译。
from babel-plugin-import.
我下周找时间解决下这个问题。
from babel-plugin-import.
我新提一个 issue:#46
from babel-plugin-import.
Related Issues (20)
- 编译报错了啊,哥哥 HOT 1
- [email protected]版本bug HOT 1
- 公告:1.13.4 的问题说明 HOT 15
- AssignmentPattern 的情况是否应该考虑一下?
- HELP!!! how i can use this in rollup!!!
- 使用yalc开发组件库,工程不能随时更新
- When using the plugin, I got warnings on Netlify about "Conflicting order. Following module has been added:"
- add LICENSE.md
- 只想要import样式文件,能不能不要帮我处理js文件? HOT 1
- 是我配置的姿势不对吗,毛用都没有 HOT 1
- unable to resolve dependency tree
- babel-plugin-import 对 ts语法 ( Com as any ) 和 带装饰器的 class extends Com 支持有问题 HOT 1
- babel-plugin-import与babel-plugin-istanbul冲突
- plugin 中 第三个参数作用
- 不知道为什么打包后会有引入node_modules/antd/es/index.js的代码 HOT 1
- 局部变量和 import 重名 插件转换有问题
- ImportDeclaration(path, state){} 监听 可以会比 CallExpression(path, state) {} 监听 后执行。
- 使用了thread-loader后,customName配置项失效
- 1.13.7 驼峰转换有问题,导致构建报错找不到组件 HOT 1
- 命名转换方法导致其他组件报错的问题。 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from babel-plugin-import.