Code Monkey home page Code Monkey logo

webpack-typescript-babel's Introduction

Webpack-TypeScript-Babel

This is sample repository demonstrates how to use Webpack, TypeScript and Babel

Building the repo

npm run build

Building only types

npm run build:types

Type-Checking the repo

npm run type-check

And to run in --watch mode:

npm run type-check:watch

webpack-typescript-babel's People

Contributors

a-tarasyuk avatar dependabot[bot] avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

webpack-typescript-babel's Issues

Webpack build does not run due to terser-webpack-plugin dependency

Thanks

First off great starting guide! Decided I wanted to learn Typescript and your webpack setup has helped a lot. Im not sure if you would like a PR with the fix to this issue as it seems the maintainers are already working on solving this on there end but if so I would be happy to help.

Problem

terser-webpack-plugin crashes when Webpack is ran.

Logs

Starting type checking service...
Using 1 worker with 2048MB memory limit
Hash: 8deabb4a8938f47197c2
Version: webpack 4.28.3
Time: 498ms
Built at: 2019-02-02 21:17:59
 1 asset
Entrypoint main = bundle.js
[0] ./src/index.ts 1.66 KiB {0} [built]

ERROR in bundle.js from Terser
TypeError: Cannot read property 'minify' of undefined
    at minify (/home/jacob/Development/personal/content-tweeter/node_modules/terser-webpack-plugin/dist/minify.js:175:23)
    at module.exports (/home/jacob/Development/personal/content-tweeter/node_modules/terser-webpack-plugin/dist/worker.js:13:40)
    at handle (/home/jacob/Development/personal/content-tweeter/node_modules/worker-farm/lib/child/index.js:44:8)
    at process.<anonymous> (/home/jacob/Development/personal/content-tweeter/node_modules/worker-farm/lib/child/index.js:51:3)
    at emitTwo (events.js:126:13)
    at process.emit (events.js:214:7)
    at emit (internal/child_process.js:772:12)
    at _combinedTickCallback (internal/process/next_tick.js:141:11)
    at process._tickCallback (internal/process/next_tick.js:180:9)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build:js: `webpack --mode=production`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the [email protected] build:js script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

More Info

This has already been reported to the maintainers webpack-contrib/terser-webpack-plugin#67

And is explained in webpack-contrib/terser-webpack-plugin#66

Fix

As stated in Issue 66 add the following to your package.json

  "resolutions": {
    "terser": "3.14.1"
  }

tsconfig target:es2015 should be target:esnext if we are already using babel to transpile the ts files

As mentioned here:
https://devblogs.microsoft.com/typescript/typescript-and-babel-7/

{
  "compilerOptions": {
    // Target latest version of ECMAScript.
    "target": "esnext",
    // Search under node_modules for non-relative imports.
    "moduleResolution": "node",
    // Process & infer types from .js files.
    "allowJs": true,
    // Don't emit; allow Babel to transform files.
    "noEmit": true,
    // Enable strictest settings like strictNullChecks & noImplicitAny.
    "strict": true,
    // Disallow features that require cross-file information for emit.
    "isolatedModules": true,
    // Import non-ES modules as default imports.
    "esModuleInterop": true
  },
  "include": [
    "src"
  ]
}

It makes sense to set target:esnext and noEmit: true if you are using babel to transpile the ts files using preset-typescript

Is there a reason for not doing that here?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.