Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

webpack2 ant-design-mobile error #516

Closed
fengyun2 opened this issue Nov 12, 2016 · 34 comments
Closed

webpack2 ant-design-mobile error #516

fengyun2 opened this issue Nov 12, 2016 · 34 comments

Comments

@fengyun2
Copy link

本地环境

  • antd-mobile 版本:
    "antd-mobile": "^0.9.8",
  • 操作系统及其版本:
    windows10
    node: 7.0.0
  • 浏览器及其版本:
    chrome55

你做了什么?

import 'antd-mobile/lib/button/style';
import Button from 'antd-mobile/lib/button';

import React, {Component} from 'react'

class AntNavBar extends Component {
  render () {
    return (
    <div>
      <Button>Start</Button>
    </div>
    )
  }
}

export default AntNavBar

.babelrc

{
  "presets": ["es2015", "stage-2", "react"],
  "plugins": [["import", { "libraryName": "antd-mobile", "style": "css" }],"transform-runtime", "transform-decorators-legacy", "transform-class-properties"],
  "comments": false
}

你期待的结果是:

像官网一样正常显示

实际上的结果:

ERROR in ./~/.0.9.8@antd-mobile/lib/button/index.js
Module not found: Error: Can't resolve 'react-native' in 'D:\test\js\1112\react-redux-antd-mobile\node_modules\.0.9.8@antd-mobile\lib\button'
@warmhug
Copy link
Contributor

warmhug commented Nov 12, 2016

image
注意看文档

@fengyun2
Copy link
Author

但是我在webpack1.x不用定义这个也可以运行哦, 但是到了webpack2.x就不行了哦。

@warmhug
Copy link
Contributor

warmhug commented Nov 12, 2016

都要设置的

@fengyun2
Copy link
Author

fengyun2 commented Nov 12, 2016

好像在 webpack2.x 中 modulesDirectories 不在 resolve 中配置了。 添加了上面给的配置项, 但是在webpack2.x中还是报这个错误。
同时也不明白 modulesDirectories: ['node_modules', path.join(__dirname, '../node_modules')],第一个参数,第二个参数分别是什么意思?

@warmhug
Copy link
Contributor

warmhug commented Nov 29, 2016

欢迎帮忙排查原因。另外可以改回使用 webpack1.x 。

@warmhug warmhug closed this as completed Nov 29, 2016
@ibufu
Copy link

ibufu commented Mar 17, 2017

@fengyun2 这个问题解决了吗

@timzaak
Copy link

timzaak commented Mar 23, 2017

什么时候能兼容webpack2.X, 现在webpack 都出到2.3了。

@paranoidjk
Copy link
Contributor

@timzaak #1010

什么时候能兼容webpack2.X, 现在webpack 都出到2.3了。

你的说法不准确,并不是 antd-mobile 来兼容 webpack 2.x, 只是配置方式变了而已,用户选择什么构建工具我们无法控制,你要使用 webpack2,你就得自己探索它的配置方法。

@timzaak
Copy link

timzaak commented Mar 24, 2017

懂了。除了官方提供的,其他的都是用户的问题

@paranoidjk
Copy link
Contributor

@timzaak 请谅解,我们人力和精力有限,上面我发你的issue的方案你可以试试。等roadhug升级到webpack2,我会给出官方的webpack2 demo。
也欢迎你帮我们贡献你的配置方法。

@timzaak
Copy link

timzaak commented Mar 24, 2017

基本上所有网上能搜到的方法,都尝试了。都报错。。报错内容也都是react-native找不到。

为什么执着于webpack2.x 主要是因为github上最火的两个react手脚架react-boilerplate,react-starter-kit 都是webpack2.x。
下面只能尝试改你们的构建脚本了。

@yesmeck
Copy link
Member

yesmeck commented Mar 24, 2017

看起来你们用的是 cnpm

@timzaak
Copy link

timzaak commented Mar 24, 2017

npm install --verbose --registry=https://registry.npm.taobao.org
:)

@deot
Copy link

deot commented Mar 25, 2017

@timzaak 2.x使用这样的方式,我是这么解决的, 配置里

resolve: {		
    mainFiles: ["index.web","index"],// 这里哦
    modules: [path.resolve(__dirname, "src"), "node_modules"],
    extensions: ['.web.tsx', '.web.ts', '.web.jsx', '.web.js', '.ts', '.tsx', '.js', '.jsx', '.json'],
},

@timzaak
Copy link

timzaak commented Mar 27, 2017

@deot O(∩_∩)O谢谢。 完美解决react-native引入问题。但是还有less样式以及icon的问题。
icon问题好解决,只需要按照官网就可以了。

const svgSpriteDirs = [
  require.resolve('antd-mobile').replace(/warn\.js$/, ''), // antd-mobile 内置svg
  //path.resolve(__dirname, 'src/my-project-svg-foler'),  // 业务代码本地私有 svg 存放目录
];
{
      test: /\.svg$/,
      loader: 'svg-sprite-loader',
      include: svgSpriteDirs,
}

less问题,目前解决的不够优雅,期待有更好的方案:
webpack配置文件:

{
      test: /\.less$/,
      use: [{
        loader: "style-loader"
      }, {
        loader: "css-loader"
      }, {
        loader: "less-loader"
      }]
}

引入:

//遵照按需引入。 以官方的NavBar demo测试,需要如下引入

import 'antd-mobile/lib/nav-bar/style'
import NavBar from 'antd-mobile/lib/nav-bar'
import 'antd-mobile/lib/icon/style'
import Icon from 'antd-mobile/lib/icon'

//import 'antd-mobile/lib/nav-bar/style' 用来引入样式。如果ant-design的目录结构产生变化,需要调整

PS: 不需要引入babel-plugin-import

@deot
Copy link

deot commented Mar 27, 2017

@timzaak 要引入官方的样式可以不用你这个方式,这是引入antd-mobile的样式,这样你就可以相当的优雅了

{
  test: /\.(css|less)$/,
  use: ['style-loader','css-loader','less-loader'],// 一定要有style-loader
  include: [
      path.resolve(__dirname, "node_modules"), // 非常关键
      path.resolve(__dirname, "src")  // 还需要把你项目里的css,less所在的文件夹内敛
  ]
},

我项目是用sass的,不过同样可以帮到你

@gooddaddy
Copy link

gooddaddy commented Apr 11, 2017

我使用的webpack2.0,我按照下面的设置还是不行。。
resolve: {
mainFiles: ["index.web","index"],// 这里哦
modules: [path.join(__dirname, "../node_modules")],
// extensions: ['.web.js', '.js','.json'],
extensions: ['.web.tsx', '.web.ts', '.web.jsx', '.web.js', '.ts', '.tsx', '.js', '.jsx', '.json'],
},
....
plugins: [
['import', { libraryName: 'antd-mobile', style: 'css' }],
]

还是提示Error: Cannot find module 'antd-mobile/lib/button/style/css'

我引用的方式是import { Button} from 'antd-mobile';

@himStone
Copy link

官方的没出就再等等 可以先参考下我的脚手架

https://github.com/bccsafe/typescript-react-redux-antd-mobile

  • webpack 2
  • React Router 4
  • TypeScript

@timzaak
Copy link

timzaak commented Apr 12, 2017

@deot 尝试后,发现不行。报错

ERROR in ./~/normalize.css/normalize.css
Module parse failed: /${project_path}/node_modules/normalize.css/normalize.css Unexpected token (13:5)
You may need an appropriate loader to handle this file type.

css|less改成 less。也还是不行。估计是因为我的是按需加载。导致只要项目中没引入的东西,就不会编译进去。

@gooddaddy 你可以参考下:http://git.oschina.net/timzaak/graphql-web-mobile-starter/blob/master/internals/webpack/webpack.base.babel.js?dir=0&filepath=internals%2Fwebpack%2Fwebpack.base.babel.js&oid=b2dae485d90abaa4cb44bfe22f556f884d9a2c68&sha=ccf4e4b98e32e9056c3fcfabdad92ad1a9fea71c

这是我copy react-boilerplate项目配置,并根据自己需求改的。

另外,我发现你引入了整个ant_design_mobile,如果这样的话,我觉得你可以尝试通过index.html直接引入ant_design_mobile 压缩好的文件。

至于 ['import', { libraryName: 'antd-mobile', style: 'css' }]。 这个在我的配置里没有用到。

@deot
Copy link

deot commented Apr 12, 2017

@timzaak 我也不知道关于你的报错是怎么回事(我建议你多折腾一下,会舒服很多)....
另外看下path.resolve(__dirname, "node_modules") 这个__dirname是否出错了

后来我是在antd-mobile中使用下面这样的方式(因为发现我的页面本身需要这个东西,所以我做了一个处理)

import 'normalize.css/normalize.css';

@timzaak
Copy link

timzaak commented Apr 12, 2017

@deot 遵照按需引入的话,必须在某一个地方声明要引入的文件。纵观所有的library下的 .web.js文件,都没有声明引入相应的less文件。
解决方案:
1.直接引入dist/antd-mobile.less
2.围绕antd-mobile库写个webpack2插件。当引入 library下的x/index.web.js时,自动引入相应的less文件。
3.手动引入 import 'antd-mobile/lib/${library}/style'

方案1,和按需引入理念冲突。但如果方案2所说的插件解决后,会很容易就过渡过去,也是目前我个人认为最节约时间的解决方案。
方案2,由于目前本人对webpack的了解处于教程都没看过的阶段,留待以后有时间再解决。
方案3,有点笨拙,但基本上能解决问题。

@deot
Copy link

deot commented Apr 12, 2017

@timzaak 我刚才试了下你在oschina的项目,改写后毫无问题!!!!

import { NavBar } from 'antd-mobile'
import { Icon } from 'antd-mobile'
// 引入`babel-plugin-import` 设置 `.babelrc`

我找到一个问题,希望对你有帮助吧
发现你是这么使用的include: /node_modules/,我在win上没有问题,mac上就出现报错了,你试试改成path.resolve(__dirname, "node_modules")

@timzaak
Copy link

timzaak commented Apr 12, 2017

@deot
import { NavBar } from 'antd-mobile' 是引用整个antd-mobile的资源了。属于全部引用。
import NavBar from 'antd-mobile/lib/nav-bar' 只是引用nav-bar相关的资源,属于按需引用。

按需引用的原因是:压缩单个页面所需js资源大小,这对移动开发比较重要。目前我司要一个页面加载出来,需要下载接近1M大小的bundle.js。 特恐怖。
全部引用 可以在做web后台的时候这么搞。毕竟用户少。

@deot
Copy link

deot commented Apr 12, 2017

@timzaak 吓的我去检查了下代码;我确定我的项目没有引入全部资源,我觉得你可能少用了引入babel-plugin-import
设置 .babelrc

{
  "presets": [
    "es2015",
    "react",
    "stage-0"
  ],
  "plugins": [
    [
      "import",
      [
        {
          "libraryName": "antd",
          "style": true
        },
        { 
          "libraryName": "antd-mobile",
          "style": true
        }
      ]
    ]
  ]
}

可以无视antd;我项目同时管理mobile和pc

@gooddaddy
Copy link

gooddaddy commented Apr 12, 2017 via email

@timzaak
Copy link

timzaak commented Apr 12, 2017

@deot 万分感谢!试了试,真的是按需加载。完美!!

最后总结一下:

依赖:
less  
less-loader 
svg-sprite-loader
babel-plugin-import

webpack配置文件:
//svg
const svgSpriteDirs = [
  require.resolve('antd-mobile').replace(/warn\.js$/, ''), // antd-mobile 内置svg
  //path.resolve(__dirname, 'src/my-project-svg-foler'),  // 业务代码本地私有 svg 存放目录
];
{
      test: /\.svg$/,
      loader: 'svg-sprite-loader',
      include: svgSpriteDirs,
}
//less
{
      test: /\.less$/,
      use: [{
        loader: "style-loader"
      }, {
        loader: "css-loader"
      }, {
        loader: "less-loader"
      }]
}
// babel js
{  
      test: /\.js$/, 
      loader: 'babel-loader',
      exclude: /node_modules/,
      query: {
            plugins: [["import", {
                  libraryName: "antd-mobile",
                  style: true, 
            }]]
      },
}

//resolve,解决 antd-mobile 代码查找问题
resolve: {
    mainFiles: ["index.web","index"],// 这里哦
    modules: ['app', 'node_modules', path.join(__dirname, '../node_modules')],
    extensions: [
      '.web.tsx', '.web.ts', '.web.jsx', '.web.js', '.ts', '.tsx',
      '.js',
      '.jsx',
      '.react.js',
    ],
    mainFields: [
      'browser',
      'jsnext:main',
      'main',
    ],
  },

以官方的NavBar demo测试,下面的引入方式也能按需加载
import {NavBar,Icon} from 'antd-mobile'

具体配置可参照 https://git.oschina.net/timzaak/graphql-web-mobile-starter 项目。不过配置有点复杂,不推荐。

@gooddaddy 你的问题必须看到你完整的配置才可以往下走。

@paranoidjk
Copy link
Contributor

@timzaak
欢迎帮我们把配置方法添加到 wiki 里方便更多的用户 https://github.com/ant-design/ant-design-mobile/wiki

也可以在官方demo库里添加webpack2的demo https://github.com/ant-design/antd-mobile-samples

@xmchyabi
Copy link

Error: Cannot find module 'antd-mobile/lib/button/style/css'
老是报这个错误.....

@paranoidjk
Copy link
Contributor

@xmchyabi 应该是没配置 webpack.resolve, 请看文档 https://mobile.ant.design/docs/react/introduce-cn#Web-使用方式

@xmchyabi
Copy link

@paranoidjk 谢谢你的回复,#516呀,官网demo这些我都有尝试去弄了,
我是用 react stater kit 脚手架,里面是 webpack 2.x的。
也仍是报那个错误, 你是否官方有 webpack 2.x的配置方法吗。

@yutucc
Copy link

yutucc commented Aug 16, 2017

需要注意三点:
.babelrc中需要加 "import",(见下面)

{
    "presets": [
        "react",
        "es2015",
        "stage-0"
    ],
    "plugins": [
        "transform-object-rest-spread",
        "transform-do-expressions",
        [
            "import",
            {
                "style":"css",
                "libraryName": "antd-mobile"
            }
        ]
    ]
}

webpack 的svg loader(用官网的说法:Antd-Mobile 所有图标都是用 svg,需要配置 svg-sprite-loader)

{
            test: /\.(svg)$/i,
            loader: 'svg-sprite-loader',
            include: [
                require.resolve('antd-mobile').replace(/warn\.js$/, ''),  // 1. 属于 antd-mobile 内置 svg 文件
                // path.resolve(__dirname, 'src/my-project-svg-foler'),  // 自己私人的 svg 存放目录
            ]
        }

另外,最坑的是 resolve webpack1和webpack2是不同的(ps,官网上目前是webpack1的写法)

let ROOT_PATH = path.resolve(__dirname);
let APP_PATH = path.resolve(ROOT_PATH, 'app'); // 源码的目录

resolve: {
	modules: [path.resolve(ROOT_PATH, 'node_modules'), APP_PATH],
	extensions: ['.web.js', '.jsx', '.js', '.json'],
},

关于ant design mobile的例子

@meetflyings
Copy link

@timzaak 能不能给个完整的配置create-react-app栗子???

@aromameng
Copy link

我的样式都是px显示而不是rem,这个是什么原因导致的?

@kaibeen
Copy link

kaibeen commented Oct 10, 2017

@CocoChen917 https://github.com/ant-design/antd-mobile-samples 里面有啊

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests