Giter Site home page Giter Site logo

Comments (10)

afc163 avatar afc163 commented on May 13, 2024 2

@shengliangli 刚才在别人那里重现了你的问题,发现是 vendor 中配置了 antd 的缘故,去掉即可。

from babel-plugin-import.

ivyhaswell avatar ivyhaswell commented on May 13, 2024

同样遇到这个问题,.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.

 avatar commented on May 13, 2024

+1

from babel-plugin-import.

afc163 avatar afc163 commented on May 13, 2024

当 style 设为 lesstrue 时,这段代码会导致此插件失效:https://github.com/ant-design/antd-init/blob/1.1.0/boilerplates/plain-react/webpack.config.js#L21-L29

设为 css 时没有问题。

from babel-plugin-import.

sorrycc avatar sorrycc commented on May 13, 2024

@afc163 确定? 我们默认脚手架就是这个配置。

from babel-plugin-import.

pigcan avatar pigcan commented on May 13, 2024

应该不是吧,纯脚手架和业务项目里面都用过并没有出现这个问题。

from babel-plugin-import.

muzuiget avatar muzuiget commented on May 13, 2024

是做了 code spliting 就会出现的,是不是 babel-plugin-antd 没考虑到这种情况?

from babel-plugin-import.

muzuiget avatar muzuiget commented on May 13, 2024

搜了一下,这个字符串 You are using prebuilt antd 只在 dist/*.js 里存在,应该是 webpack.optimize.CommonsChunkPlugin 直接使用了,而没有做按需编译。

from babel-plugin-import.

sorrycc avatar sorrycc commented on May 13, 2024

我下周找时间解决下这个问题。

from babel-plugin-import.

afc163 avatar afc163 commented on May 13, 2024

我新提一个 issue:#46

from babel-plugin-import.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.