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

fix: import style from less error when build in babel way #220

Closed
wants to merge 2 commits into from

Conversation

daolou
Copy link

@daolou daolou commented May 15, 2020

detaile: #218

Checklist
  • npm test passes
  • tests are included
  • documentation is changed or added
  • commit message follows commit guidelines
Description of change

issues: #218

babel.ts:

    const patterns = [
+       join(srcPath, '../typings.d.ts'),
        join(srcPath, '**/*'),
        `!${join(srcPath, '**/fixtures{,/**}')}`,
        `!${join(srcPath, '**/demos{,/**}')}`,
-  return /\.tsx?$/.test(path) && !path.endsWith('.d.ts');
+  const isTypings = path.endsWith('typings.d.ts');
+  return isTypings || (/\.tsx?$/.test(path) && !path.endsWith('.d.ts'));

@codecov
Copy link

codecov bot commented May 15, 2020

Codecov Report

Merging #220 into 2.x will increase coverage by 0.77%.
The diff coverage is 100.00%.

Impacted file tree graph

@@            Coverage Diff             @@
##              2.x     #220      +/-   ##
==========================================
+ Coverage   73.39%   74.16%   +0.77%     
==========================================
  Files          16       16              
  Lines         466      480      +14     
  Branches      158      164       +6     
==========================================
+ Hits          342      356      +14     
  Misses        123      123              
  Partials        1        1              
Impacted Files Coverage Δ
packages/father-build/src/babel.ts 78.72% <100.00%> (+3.72%) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 804f2c7...1d80a8a. Read the comment docs.

@daolou
Copy link
Author

daolou commented May 15, 2020

组件开发,不应该在 ts/js 脚本文件中引入less/css 样式文件,应该分离开,避免耦合

错误示例: (纠正:有这种应用场景)

import React from 'react';
import Styles from './index.less';
import Classnames from 'classnames';
import { Divider } from 'antd';

export default ({ title }: { title: string }) => (
  <h1 className={Classnames(Styles['foo-center'])}>
    <Divider type="vertical" />
    {title}
    <Divider type="vertical" />
  </h1>
);

正确示例:

import React from 'react';
// import Styles from './index.less';
import Classnames from 'classnames';
import { Divider } from 'antd';

export default ({ title }: { title: string }) => (
  <h1 className={Classnames('foo-center')}>
    <Divider type="vertical" />
    {title}
    <Divider type="vertical" />
  </h1>
);

@daolou daolou closed this May 15, 2020
@daolou
Copy link
Author

daolou commented May 18, 2020

有些场景是需要在js中引入css的,所以我又打开了哈

@daolou daolou reopened this May 18, 2020
@@ -128,7 +128,8 @@ export default async function(opts: IBabelOpts) {
const babelTransformRegexp = disableTypeCheck ? /\.(t|j)sx?$/ : /\.jsx?$/;

function isTsFile(path) {
return /\.tsx?$/.test(path) && !path.endsWith('.d.ts');
Copy link
Contributor

@ycjcl868 ycjcl868 May 18, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

不是每个 TS 项目都有 .d.ts 的吧

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

给个默认的 .d.ts? 就像 template/tsconfig.json 一样?

Copy link
Author

@daolou daolou May 18, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

其实 .d.ts 有没有不重要,没有的话,就和原来一样,我这里仅仅是把根目录下的 typings.d.ts 加到了匹配规则,并进入了 gulp-typescript 编译

关键是 typings.d.ts 有点问题,因为也有可能是 index.d.tstypings/index.d.ts等,由于我的项目是用脚手架@umijs/dumi-lib创建的,所以我就用了typings.d.ts,没考虑全面,
感觉可以多匹配几个,然后再 在 tsconfig.json 里面取匹配项 兜底,

这样可行不?

@daolou daolou changed the title pr(bug): issues: #218 fix: import style from less error when build in babel way May 22, 2020
patterns add include
@PeachScript
Copy link
Member

感觉这么用还是有点 workaround,无法获得和 tsc 一样的行为;该问题请先参考临时方案绕开,再帮忙一起想想有没有更好的解法,比如是否能启用 gulp-typescript 的 project 模式解决。

此 PR 就先关闭了。

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

Successfully merging this pull request may close these issues.

[引入antd组件 打包出错]:No name was provided for external + error TS2307: Cannot find module
3 participants