javascript – 如何将使用typescript编写的组件作为global,commonjs或typescript模块发布

2019-07-05 18:33:05 阅读：259 来源： 互联网

标签：javascript module npm typescript commonjs

我在typescript中编写了一个简单的组件,它依赖于d3.我想在npm上发布这个组件,并将其用作全局,commonjs模块或打字稿模块.该组件看起来像这样：

/// <reference types="d3" />
class MyAwesomeComponent {
  data(data: IMyDataFormat) {
    // set data, etc.
  }
  render() {
    // do stuff with d3
  }
}
interface IMyDataFormat {
  // keys/types
}

我的tsconfig.json文件目前看起来像这样：

{
  "compilerOptions": {
    "module": "none",
    "target": "es5",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "declaration": true,
    "outFile": "./dist/index.js",
    "sourceMap": true
  },
  "include": [
    "./src/**/*.ts"
  ]
}

当我使用此配置运行tsc时,我得到一个在全局上下文中工作的文件,因此这适用于消费者：

<script src="./d3.js"></script>
<script src="./my-awesome-component.js"></script>
<script>
  var chart = new MyAwesomeComponent();
  chart.data([/* ... */]);
  chart.render();
</script>

如何设置我的项目(例如,使用备用tsconfig文件或对源文件进行小的更改等),以便它可以在commonJS环境(即webpack或browserify)以及打字稿项目环境中使用？

以下是我期望为commonJS环境工作的内容：

const MyAwesomeComponent = require('my-awesome-component');
// this would also be fine:
const MyAwesomeComponent = require('my-awesome-component').MyAwesomeComponent;

以下是我期望为TypeScript环境工作的内容：

import {MyAwesomeComponent, IMyDataFormat} from 'my-awesome-component';

谢谢！

解决方法:

我已经向npmjs.org发布了一个样板示例.

>该包名为stackoverflow-47210046.
>我还用source创建了一个GitHub存储库.
>有一些步骤的主要文档可以在那里找到,但这里也有一些评论：

>确保已将“dom”添加到tsconfig.json中的库中,以便在编译期间包含它们. (这通常不是必需的,但问题是在样板TS封装中消耗d3.)
>将“main”：“lib / index”添加到package.json.你可以看到,它指向编译的输出,没有文件扩展名.
> Adde“typings”：package.json的“lib / index”.
>虽然lib输出文件夹未添加到版本控制中,但它将在npmjs.org上提供.
>测试将使用ts节点执行,因此可以省略tsc编译.
>如果要在监视模式下运行测试,请执行npm run test – -w.
>如果要在监视模式下运行tsc编译器,请执行npm run build – -w.

我希望这有帮助,如果您有任何问题,请在此处发布,或在GitHub上提交新问题.

干杯.

标签：javascript,module,npm,typescript,commonjs
来源： https://codeday.me/bug/20190705/1389903.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 如何将使用typescript编写的组件作为global,commonjs或typescript模块发布