antd typescriptt antd怎么打包

输入关键字或相关内容进行搜索
我已经按照《Android离线打包》的流程成功将一个HBuilder工程打包到我的Eclipse项目中作为app的一个功能模块。我也尝试过在assets目录下建立多个项目包,并在control文件的apps下配置多个&app/&,但是调用的时候不知道怎么区分这两个项目。
目前HBuilder暂时只支持一个app,多app支持在规范中。
最近在看这个,只能在官方给的demo上换成自己的HBuilder工程,但是自己在eclipse新建一个新项目,却不知道怎么把HBuilder工程应用进去作为APP的一个功能模块,可以给我个例子吗?邮箱谢谢。
如何用eclipse新项目调用hbuilder工程呢?示例能给一个吗,谢谢
要回复问题请先或
浏览: 4678
关注: 5 人问题: Webpack + ts-loader 打包Typescript代码提示模块找不到的问题。
描述:ps.大概已经发现了问题所在:因为ts-loader的test配置为/.tsx?/ ,所以无法处理import {Person} from './Person'省略后缀名的引用。那么现在的问题是怎么匹配无后缀名或者.tsx?的后缀呢?运行环境node 6.10.0webpack 2.2.1typescript 2.2.1项目结构文件内容// webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './src/app.ts' ,
path: 'dist' ,
filename: '[name].bundle.js'
test: /\.tsx?$/ ,
use: ['ts-loader'] ,
exclude: [
path.resolve(__dirname ,'node_modules')
plugins: [
new webpack.LoaderOptionsPlugin({
options: {
resolve: {
extensions: ['', '.ts', '.tsx']
};// tsconfig.json
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"declaration": false,
"noImplicitAny": false,
"removeComments": true
"include": [
"./src/**/*"
"exclude": [
"node_modules"
}// src/Person.ts
export class Person {
private name:
constructor (name:string){
this.name =
console.log(`hello ${this.name}!`);
}// src/app.ts
import { Person } from './Person';
let person:Person = new Person('Hung');
person.say();错误信息如下F:\Temp\test\dist&npm run webpack
& test@1.0.0 webpack F:\Temp\test
& webpack --color
ts-loader: Using typescript@2.2.1 and F:\Temp\test\tsconfig.json
Hash: 49f51c5112
Version: webpack 2.2.1
Time: 847ms
Chunk Names
main.bundle.js
[0] ./src/app.ts 174 bytes {0} [built]
ERROR in ./src/app.ts
Module not found: Error: Can't resolve './Person' in 'F:\Temp\test\src'
@ ./src/app.ts 3:15-34
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "D:\\Program Files\\nodejs\\node.exe" "D:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "webpack"
npm ERR! node v6.10.0
npm ERR! npm
npm ERR! code ELIFECYCLE
npm ERR! test@1.0.0 webpack: `webpack --color`
npm ERR! Exit status 2
npm ERR! Failed at the test@1.0.0 webpack script 'webpack --color'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the test package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
webpack --color
npm ERR! You can get information on how to open an issue for this project with:
npm bugs test
npm ERR! Or if that isn't available, you can get their info via:
npm owner ls test
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
F:\Temp\test\dist\npm-debug.log万分感谢!解决方案1:在 tsconfig.json 中指定 jsx 参数:可能的值:参考:typescript comiler-options解决方案2:test配错了吧
上一篇: 下一篇:如何评价 Ant Design 这个项目(一个设计语言)? - 知乎1771被浏览169537分享邀请回答16125 条评论分享收藏感谢收起476 条评论分享收藏感谢收起查看更多回答3 个回答被折叠()antd踩坑-Checkbox禁用错乱_美文阅读,精品文摘网
当前位置: &>&&>& >
antd踩坑-Checkbox禁用错乱
选择框禁用引发的问题
其实需求比较简单,而且antd提供了现成的方法。但是使用antd的方法是遇到了一个问题,在这里大致的写一下当时的调试思路,也当是记录一遍以后自己查看。
需求就是在满足某个条件是选择的框是禁用状态,如下图一样
antd选择框禁用demo
其中antd给出的代码示例为
const rowSelection = {
getCheboxProps: record =& ({
disabled: record.name === '胡彦祖'
这段代码其实比较好理解,就是当名字为'胡彦祖'的时候前面的选择框禁用,既然人家提供了这样的api我们去用就好了,那么问题来了
按照提供的api代码将是如下
const rowSelection = {
selectedRowKeys,
onChange: this.onSelectChange.bind(this),
getCheboxProps: record =& ({
disabled: record.status === 2
这是问题出现了,和我想象的差距有点大,不应该是满足record.status === 2的被禁用,不满足的是可用状态吗?可是结果却是所有的选择框都是禁用状态,遇到这样的问题,当然会去看有没有报错,恭喜自己的运气,就是打死不报错。没有报错就放弃吗?那需求功能怎么办?开启debug大法。
当然我得先去看看这是不是正常的是不是这页的所有数据都是status = 2的,待我看完返回数据发现并不是所有的都是等于2的还有等于1的几个,想着那我让条件变成false是不是所有的都不禁用了呢
条件为false
如我预期的情况所有的都不被禁用,那么问题在哪里呢,比较无奈,去将antd的列子拿到项目中运行
运行结果告诉我没什么问题啊,那我只能看这个需要配置的getCheckboxProps到底干了什么,去改下demo的代码
const rowSelection = {
getCheckboxProps: record =& {
console.log(record.age)
return { disabled: record.age === 32 }
发现控制台分别输出了32,42,32
修改demo输出结果
好像明白了什么,那我的代码中所以得选择框全部保持一致是不是我的record.status === 2 全部是一样还是压根只有一个,既然有想法就去看一下,改代码
const rowSelection = {
selectedRowKeys,
onChange: this.onSelectChange.bind(this),
getCheckboxProps: record =& {
console.log(record.status)
return { disabled: record.status === 666 }
结果和想的基本符合,我一页数据是10条,控制台却只输出了一个结果
修改代码结果
这个时候问题在哪里呢?咋一样自己的代码和demo的代码没有什么不一样啊,为什么demo是正常的,自己的却是不行的,代码没有问题,那是哪里出了差错,我能想到的只有我的数据出了问题,再一看我我明白了,demo的数据中有key,但是我这边的数据返回中并没有key的存在(当我发现key的时候已经确定是key的原因了,因为antd 0.12.x的时候数据中没有key是会报错的,但是我现在用的是1.9,没有key并没有报错功能却失效了,这是修复了报错埋下坑),难道因为没有key导致getCheckboxProps没有循环去执行,只是执行了第一次?,既然有想法了就是做呗。自己给返回的数据中遍历追加了一个key进去,功能正常了。虽然功能正常了,我得去把困惑了20多分钟的原因找到啊
去看antd的源码,虽然现在antd的源码typescript写的那又有什么关系,反正看不懂,直接去看table组件
renderRowSelection
看到表格部分渲染的代码这边用了filter去过滤,看到这里我们需要去看看getCheckboxPropsByItem干了什么
getCheckboxPropsByItem
getCheckboxPropsByItem最后返回格式为
getCheckboxPropsByItem返回
看到这里应该明白之前为什么始终只有一个结果了
去看看他获取key的函数
getRecordkey
因为我们没有传key,而且他在调用的时候并没有传index所以最终的返回的key就成了undefined
当我们在数据中没有key是getCheckboxPropsByItem返回的结果就是这样的
getCheckboxPropsByItem 返回
那么之前为什么所以选择框统一禁用或者可用就一看就知道了,为什么调试时只输出了一个值也就明白了,这样永远就看最后一条数据的脸色了。
解决方案:
自己在前端自己遍历追加key
让后端在数据返回就加上key
(责任编辑:美朵)
每日重点推荐
夏医生是自己多年老同事的儿子,国外学成归来做事业,老同事担心儿子诊所刚开,门厅罗雀伤了自尊,便偷偷塞钱给李梅,求她装病去“捧场”。
04-05 12-15 12-15
一周热点文章
在线阅读专题}

我要回帖

更多关于 typescript怎么安装 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信