使用Webpack4 / TS-Loader在错误的文件夹中生成的打字稿声明

时间:2019-08-21 12:49:50

标签: typescript webpack tsconfig ts-loader

我正在尝试创建一个UI组件库(用于工作),我们已经用Typescript编写了它。我正在为最终版本进行webpack配置-我可以导出d.ts文件,但它们似乎不在正确的位置。那就是我现在得到的。

./dist
  - comp1.js
  - comp1.js.map
  /components
    /comp1
      comp1.d.ts

我想我需要的是

./dist
   - comp1.js
   - comp1.js.map
   - comp1.d.ts

这是我的webpack配置:

const { readdirSync } = require("fs");
const nodeExternals = require("webpack-node-externals");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const getDirectories = source =>
  readdirSync(source, { withFileTypes: true })
    .filter(dirent => dirent.isDirectory())
    .map(dirent => dirent.name);

const componentList = getDirectories(__dirname + "/src/components/");

const tsRule = {
  test: /\.ts(x?)$/,
  exclude: /node_modules/,
  use: [
    {
      loader: "ts-loader",
      options: {
        configFile: "tsconfig-prod.json"
      }
    }
  ]
};

const jsRule = {
  enforce: "pre",
  test: /\.js$/,
  loader: "source-map-loader"
};


const miniCSSRule = {
  test: /\.(css|sass|scss)$/i,
  use: [
    MiniCssExtractPlugin.loader,
    "css-loader",
    // Compiles Sass to CSS
    "sass-loader"
  ]
};

const baseConfig = {
  mode: "production",
  devtool: "source-map",
  entry: componentList.reduce((pv, cv) => {
    return { ...pv, [cv]: `${__dirname}/src/components/${cv}/index.tsx` };
  }, {}),
  output: {
    filename: "[name].js",
    chunkFilename: "[name]-[id].js",
    path: __dirname + "/lib"
  },
  externals: [
    nodeExternals(),
    {
      react: "React",
      "react-dom": "ReactDOM"
    }
  ],
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [tsRule, jsRule, miniCSSRule]
  },
  resolve: {
    extensions: [".js", ".jsx", ".ts", ".tsx"]
  }
};

module.exports = baseConfig

这是我的tsconfig-prod.json文件。

{
  "mode": "production", 
  "compilerOptions": {
    "jsx": "react",
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "outDir": "./lib",
    "removeComments": true,
    "emitDeclarationOnly": false,
    "isolatedModules": false,
    "declaration": true,
    "sourceMap": true
  },
  "include": [
    "src/components/**/*"
  ],
  "exclude": [
    "**/Stories/*.*",
    "**/*.test.*",
    "**/*.spec.*",
    "**/*.stories.*",
    "**/__snapshots__"
  ]
}

0 个答案:

没有答案