nobrainr/typescript-webpack-starter

⚡ create-ts-lib: A Starter Kit and a CLI to create your TypeScript / ES6 module bundled by Webpack without thinking about build or unit tests configurations. 🏠

typescript-webpack-starter's Issues

Distribute templates as NPM packages under @tws scope

• Move base template from https://github.com/nobrainr/typescript-webpack-starter/tree/master/packages/cli/template to https://github.com/nobrainr/typescript-webpack-starter/tree/master/packages
• Update CLI to install template from NPM not from the File System anymore
• Update lerna to handle template versions

build:prod not stopped

If I run, then everything is frozen

I use Windows 10, but if I removed DashboardPlugin(), it works

error while running server or server:dev commands

typescript-webpack-starter-master/node_modules/webpack/lib/webpack.js:19
		throw new WebpackOptionsValidationError(webpackOptionsValidationErrors);
		^

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'tslint'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack 2 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           tslint: ...
         }
       })
     ]
 - configuration.resolve.extensions[0] should not be empty.
    at webpack (.../typescript-webpack-starter

package.json

 "devDependencies": {
    "css-loader": "^0.25.0",
    "ejs-loader": "^0.3.0",
    "expose-loader": "^0.7.1",
    "html-loader": "^0.4.4",
    "html-webpack-plugin": "^2.22.0",
    "rimraf": "^2.5.4",
    "style-loader": "^0.13.1",
    "ts-loader": "^0.8.2",
    "tslint": "^3.15.1",
    "tslint-loader": "^2.1.5",
    "typescript": "^2.0.0",
    "typings": "^1.3.3",
    "webpack": "^2.1.0-beta.22",
    "webpack-dashboard": "^0.1.8",
    "webpack-dev-server": "^1.15.2"
  },

Add schematics bootstrap code (Angular, React, Vue, etc)

Angular has so-called schematics bootstrap code

$ create-ts-lib my-typescript-lib --collection=angular-starter
$ create-ts-lib my-typescript-lib --collection=react-starter
$ create-ts-lib my-typescript-lib --collection=vue-starter

The assembly hangs at any change for a minute

Something looks weird with the bundled js

add jest

today, most of project use jest instead of karma and other, you should switch to it.

I cannot debug with native ts code

It looks like occurred and enforce: 'pre' and istanbul-instrumenter-loader

Uglify seems not to do anything

Hi there.

First, thanks for this starter kit, it was a great help.

From a fresh newly created project using your cli command, I updated the index.ts to add just a comment :

export default class Main {
  constructor() {
    // Hello from the comments
    console.log("Typescript Webpack starter launched");

    if (/test/.test("test")) {
      console.log("hello there");
    }
  }
}

let start = new Main();

After a npm run build, If you inspect the app.bundle.js generated, you'll see that :

• comments are not stripped
• code is not at all uglified
• there is a huge amount of source mappings

A tiny part of the generated file :

sourcesContent:['export default class Main {\n constructor() {\n // Hello from the comments\n console.log("Typescript Webpack starter launched");\n\n if (/test/.test("test")) {\n console.log("hello there");\n }\n }\n}\n\nlet start = new Main();\n']}

Problem with loading CSS

I tried adding an css file, but I have a problem loading it.
The CSS file file is not automatic added to the dist folder after the build so I cant use

I also use typings-for-css-modules-loader.
I add import: import css = require('./main.css') to index.ts;
And to wepack.config.js I added this:

      {
        test: /\.css$/,
        include: path.join(__dirname, 'src'),
        use: [
          'style-loader',
          {
            loader: 'typings-for-css-modules-loader',
            options: {
              modules: true,
              namedExport: true 
            }
          }
        ]
      }, 

But it still not working. If I look at to browser to html elements I can see css style, but class names are different, for example:

._2IUk4Et8o97FuHtbddR-Zp {
      list-style: none;
      padding: 10px 0;
      z-index: 10000;
      margin: 0px;  
} 

Do you know, how can I import css?

Feat: Remove lodash dep added as example from generated package

Feature Request: SASS/SCSS support

thanks for this great tool -- wish i had learned about it earlier.

if it's in-line with the vision for this tool, i think support for SCSS/SASS would be great. perhaps a different preset or a flag?

also, if you don't want to implement it now but think it'd be a fine idea, please give some guidance to would-be contributors.

How to get console.log output

Hi and thank you for setting all of this up.
I am trying to get the console.log output from my application.
I can't see anything in webpack-dashboard.

source maps doesn't work properly in OSX

Hi,
The debuggers doesnt get hit (tried both chrome and firefox) in OSX. Looks like a source maps issue

No corvage date when run test

When i run the test "npm test" karma run the unit tests fine, but there are no coverage data in
/tests/build/reports/coverage/report-html/index.html

npm test
[email protected] test d:\Data\repository\webpack\my-typescript-lib
karma start
[at-loader] Using [email protected] from typescript and "tsconfig.json" from d:\Data\repository\webpack\my-typescript-lib/tsconfig.json.
[at-loader] Checking started in a separate process...
[at-loader] Ok, 0.575 sec.
06 02 2018 10:59:49.052:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
06 02 2018 10:59:49.052:INFO [launcher]: Launching browser Chrome with unlimited concurrency
06 02 2018 10:59:49.092:INFO [launcher]: Starting browser Chrome
06 02 2018 10:59:51.108:INFO [Chrome 63.0.3239 (Windows 7.0.0)]: Connected on socket TFAtGZAirSZM__kwAAAA with id 41780039
LOG: 'HELLO'
LOG LOG: 'HELLO'

Hello test
V Create hello object

TypeScript WebPack Starter Tests
V A good way to start building an awesome lib is by doing Unit Tests ??

Chrome 63.0.3239 (Windows 7.0.0): Executed 2 of 2 SUCCESS (0.041 secs / 0 secs)
TOTAL: 2 SUCCESS

No .gitignore in generated project

Documetation suggests a .gitignore would be in the generated directory, which would be cool. However there doesn't appear to be one in the template directory or in my generated project.

Provide switches options to customize the generated project

Preset Pattern:
1.Application Type -> 2.Bundler -> 3.Test Framework -> 4.Publishing -> 5.CI -> 6.CD

create-ts-lib --preset default  my-package
create-ts-lib --preset minimal my-package

Where

• default
  1.Typescript, 2.Webpack, 3.Karma+Jasmine, 4.Semantic Release, 5.CircleCI
• minimal
  1.Typescript, 2.None, 3.None, 4.None, 5.None

Or

create-ts-lib 
    --type [ typescript-client | typescript-server | typescript-universal ]
    --bundler [ webpack | parcel | rollup ]
    --test-framework [ jest | karma-jasmine | chai-mocha ] 
    --publish [ cli | npm ]
    --ci [ circleci | travis ]
    --cd [ zeit ]
    my-package

Express Js

Hello,
I'm using your starter on my new project. How to integrate this with expressjs ?

I can not import "Wolfy87EventEmitter" as "EventEmitter" into my project

Hello @evmyann

I am try to your project for a little typescript project. I have a problem when importing "Wolfy87EventEmitter" as dependency.

Error is here:
[ts] 'EventEmitter' refers to a UMD global, but the current file is a module. Consider adding an import instead.

My 'vendor.ts':

// Application Dependencies

import 'lodash';
import "wolfy87-eventemitter";

My 'vendor.d.ts':

// Application Dependencies

import 'lodash';
import "wolfy87-eventemitter";

My manager.test.ts