Question

我正在尝试构建和发布我的第一个NPM模块，并且在编译时对最佳实践有一些疑问。该项目是一个用Typescript编写并使用SASS的React组件。

当我将index.ts直接导入测试文件并将整个内容与webpack捆绑在一起时，我的组件可以正常工作。但是，如果我将其捆绑在一起，则在导入到另一个项目中时，我会失去打字的所有好处，但是如果我尝试不捆绑使用已编译的JS，则在解决包括SCSS / CSS文件和JSON文件在内的各种资产时会遇到错误。

我知道这是一个相当大的问题，但是对于如何构造项目，我一直找不到一个很好的答案。从其他包中我发现了一些注意事项： -build / dist文件夹通常包含捆绑的js文件 -lib文件夹通常包含js文件和键入内容，有时还包含map文件

所以，我的问题是，捆绑软件和已编译的js文件如何相互关联，以及如何设置我的编译器以使其正常工作。

我一直在使用webpack和tsc，但似乎无法使组合正常工作。我遇到的最新问题是dist文件夹中的已编译JS抱怨无法解析module.scss文件，这是正确的，因为使用node-sass将scss编译为css，但显然引用未正确更新。当我使用webpack时，捆绑软件可以使用，但是在导入到另一个项目中时，它会失去类型。

我的TSCONFIG看起来像这样：

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es6", "dom", "es2017"],
    "module": "commonjs",
    "declaration": true,
    "outDir": "./dist",
    "strict": true,
    //"rootDir": "src",
    "jsx": "react",
    "resolveJsonModule": true,
    "sourceMap": true,
    "moduleResolution": "node"
  },
  "include": ["src"],
  "exclude": ["node_modules", "**/__tests__/*", "temp"]
}

并且我正在使用以下脚本来构建已编译的JS：

"build":"tsc && node-sass --recursive --output dist --source-map true --source-map-contents src && cp -r ./src/schemas ./dist/"

来源在github上的https://github.com/androidpage/json-form-builder

很抱歉，目前该项目有点混乱，但主要目标是学习如何构建和编译项目，因此这个问题:)

感谢您提供的任何帮助。

为NPM编译React Typescript模块

0 个答案: