Каковы правильные конфигурации для смешанного (.ts, .js) проекта webpack / babel / tslint? - PullRequest
0 голосов
/ 02 октября 2019

Я работаю над созданием потока разработки для своей компании, используя webpack, babel, typcript и tslint (и, вероятно, более 100 других зависимостей) - на данный момент у меня есть рабочий базовый проект, но, похоже, я могу тольколибо перенесите мой src / index.js, либо скомпилируйте мой src / app.ts. Я хотел бы перенести / скомпилировать и связать оба вместе в dist / bundle.js. Я попробовал несколько разных способов (закомментировано в файле webpack.config) и не могу заставить его работать - я подумал, что кто-то, кто делал это раньше, может сказать мне через 2 секунды.

repo: https://github.com/behler-young-insite/webpack-babel-npm-config/tree/webpack-babel-ts-tslint

package.json:

  "name": "babelConfigTest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server",
    "dev2": "webpack-dev-server --mode development"
  },
  "repository": {
    "type": "git",
    "url": "https://git-codecommit.us-east-1.amazonaws.com/v1/repos/babelConfigTest"
  },
  "keywords": [],
  "author": "Derek DenHartigh <derekd@behler-young.com> (behler-young.com)",
  "license": "BY",
  "dependencies": {
    "file-loader": "^4.2.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.41.0",
    "webpack-cli": "^3.3.9",
    "webpack-dev-server": "^3.8.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^3.2.0",
    "mini-css-extract-plugin": "^0.8.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0",
    "ts-loader": "^6.2.0",
    "tslint": "^5.20.0",
    "tslint-webpack-plugin": "^2.1.0",
    "typescript": "^3.6.3"
  }
}

webpack.config.js:

const path = require('path');
const TSLintPlugin = require('tslint-webpack-plugin');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: path.join(__dirname, '/src'), // now this transpiles my index.js, but not my app.ts
    //entry: path.join(__dirname, '/src/**/*(.ts|.js)'),  // this does nothing but break the code
    // entry: path.join(__dirname, '/src/**/*.(ts|js)'),  // this does nothing but break the code
    // entry: path.join(__dirname, '/src/app.ts'),// this compiles the app.ts
    output: {
        filename: 'bundle.js',
        path: __dirname + 'dist'
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.js#/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        options: { minimize: true}
                    }
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader"
                ]
            }
        ]
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"]
    },
    plugins: [
        new TSLintPlugin({
            files: ['./src/**/*.ts']
        }),
        new HtmlWebPackPlugin({
            template: "./src/index.html",
            filename: "./index.html"
        }),
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ]
}

структура каталогов: структура каталогов

ps Я также получаю ошибки lint о no-console, хотя в tslint.json мое правило no-console установлено на false ... не уверен, связано это или нет, чем больше данных, тем лучше данныехотя моя философия.

...