Develop Reference

Rollup produces incorrect Dist structure when test are present

I'm packaging a React module with rollup. Implemented with TypeScript. It contains Jest tests. Once I add a "test/mock/data.ts" to file, the output in "dist" changes its structure. A new "dist/src" folder appears. I need the build output to be the same as if the tests were not there at all. The library is open-source: https://github.com/kubevious/ui-properties
Directory Structure:
- src
- index.ts
- test
- mock
- data.ts
- dist
- index.js
- index.d.ts // during the CI build this file is under src/
- src // only if test/mock/data.ts file is there.
- <other>
I have an ugly workaround. Would appreciate a proper solution. During the build:
$ mv .test test
$ npm run build
$ mv test .test
package.json
{
"name": "#kubevious/ui-properties",
"version": "1.0.73",
"description": "Kubevious UI Properties Components",
"main": "dist/index.js",
"types": "dist",
"files": [
"dist/**/*",
"public/**/*"
],
"scripts": {
"test": "env TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\" }' jest",
"test:watch": "jest --watch",
"build": "rollup -c",
"start": "rollup -c -w",
"format": "prettier --write ./src/ ./test/",
"format-check": "prettier --write ./src/ ./test/",
"lint": "eslint",
"storybook": "start-storybook -s ./public,./node_modules/#kubevious/entity-meta/public,./node_modules/#kubevious/ui-components/public -p 6006",
"build-storybook": "build-storybook"
},
"author": "Ruben Hakopian <ruben.hakopian#gmail.com>",
"license": "Apache-2.0",
"dependencies": {
"#kubevious/entity-meta": "^1.0.69",
"#kubevious/state-registry": "^1.0.13",
"#kubevious/ui-alerts": "^1.0.49",
"#kubevious/ui-components": "^1.0.242",
"#kubevious/ui-framework": "^1.0.59",
"#types/react-gauge-chart": "^0.3.1",
"bootstrap": "^5.0.0-beta3",
"chart.js": "^3.7.1",
"chartjs-plugin-datalabels": "^2.0.0",
"classnames": "2.3.1",
"js-yaml": "^4.0.0",
"react-chartjs-2": "^4.1.0",
"react-gauge-chart": "^0.4.0",
"the-lodash": "^2.0.9",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-router-dom": "5.3.3"
},
"devDependencies": {
"#storybook/addon-actions": "6.5.7",
"#storybook/addon-essentials": "6.5.7",
"#storybook/addon-links": "6.5.7",
"#storybook/react": "6.5.7",
"#testing-library/jest-dom": "5.16.4",
"#testing-library/react": "12.1.5",
"#types/jest": "26.0.24",
"#types/js-yaml": "^4.0.0",
"#types/node": "^14.6.0",
"#types/react": "17.0.2",
"#types/react-dom": "17.0.2",
"#types/uuid": "^8.3.0",
"#typescript-eslint/eslint-plugin": "5.27.1",
"#typescript-eslint/parser": "5.27.1",
"#babel/core": "7.18.2",
"babel-loader": "8.2.5",
"eslint": "8.17.0",
"identity-obj-proxy": "^3.0.0",
"jest": "26.6.3",
"postcss": "8.4.14",
"sass": "1.52.2",
"prettier": "^2.1.0",
"#rollup/plugin-babel": "5.3.1",
"#rollup/plugin-commonjs": "22.0.0",
"#rollup/plugin-json": "4.1.0",
"rollup": "2.75.6",
"rollup-plugin-peer-deps-external": "2.2.4",
"rollup-plugin-postcss": "4.0.2",
"rollup-plugin-typescript2": "0.32.1",
"sass-loader": "13.0.0",
"should": "13.2.3",
"storybook-css-modules-preset": "1.1.1",
"ts-jest": "26.5.6",
"ts-node": "10.8.1",
"tslib": "2.4.0",
"typescript": "4.7.3",
"rollup-plugin-sass": "1.2.12",
"#storybook/preset-scss": "1.0.3",
"#types/react-router-dom": "5.3.3",
"#testing-library/dom": "8.13.0",
"#testing-library/user-event": "13.5.0",
"jest-environment-jsdom": "26.6.2",
"css-loader": "6.7.1"
},
"resolutions": {
"the-lodash": "^2.0.9",
"#kubevious/ui-framework": "^1.0.59",
"#kubevious/ui-components": "^1.0.242",
"#kubevious/ui-alerts": "^1.0.49",
"#kubevious/entity-meta": "^1.0.69",
"#kubevious/state-registry": "^1.0.13",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-router-dom": "5.3.3",
"#types/react": "17.0.2",
"#types/react-dom": "17.0.2",
"#types/react-router-dom": "5.3.3"
}
}
rollup.config.js
import typescript from 'rollup-plugin-typescript2';
import { babel } from '#rollup/plugin-babel';
import commonjs from '#rollup/plugin-commonjs';
import postcss from 'rollup-plugin-postcss';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import json from '#rollup/plugin-json';
import sass from 'rollup-plugin-sass';
import pkg from './package.json';
export default {
input: 'src/index.ts',
output: [
{
format: 'cjs',
sourcemap: true,
file: pkg.main,
globals: { react: 'React' },
},
],
plugins: [
typescript(),
peerDepsExternal(),
postcss({
extract: false,
modules: true,
use: ['sass'],
}),
babel({ exclude: 'node_modules/**' }),
commonjs({
include: 'node_modules/**',
namedExports: {
'node_modules/react-is/index.js': ['isValidElementType'],
},
}),
sass({ insert: true }),
json(),
],
external: ['react', 'react-dom'],
};
tsconfig.json
{
"compilerOptions": {
"outDir": "dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom", "dom.iterable", "esnext","es2016", "es2017"],
"sourceMap": true,
"allowJs": false,
"jsx": "react",
"declaration": true,
"moduleResolution": "node",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"esModuleInterop": true
},
"importHelpers": true,
"include": ["./src"],
"exclude": [
"node_modules",
"dist",
"test",
"**/*.stories.js",
"**/*.stories.jsx",
"**/*.stories.ts",
"**/*.stories.tsx",
"**/test",
"**/test/**/*.test.js",
"**/test/**/*.test.ts",
"**/test/**/*.test.jsx",
"**/test/**/*.test.tsx"
]
}

Eslint not formating .ts files

I am trying to get eslint to format my .ts files. .tsx works fine but for some reason .ts does not.
my eslinrc
{
// "extends": "airbnb"
"extends": ["airbnb-typescript", "plugin:jsx-a11y/recommended", "prettier"],
"env": {
"browser": true
},
"settings": {
"import/resolver": {
"node": {
"paths": ["src"]
}
}
},
"plugins": ["prettier"],
"rules": {
"react/jsx-one-expression-per-line": 0,
"react/jsx-props-no-spreading": 0,
"react/prop-types": 0,
"import/prefer-default-export": 0,
"#typescript-eslint/no-unused-vars": 0,
"#typescript-eslint/no-use-before-define": 0,
"no-unneeded-ternary": 0,
"react/jsx-uses-react": "off",
"react/react-in-jsx-scope": "off",
"react/destructuring-assignment": 0
},
"parserOptions": {
"project": ["./tsconfig.json"]
}
}
tsconfig:
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"baseUrl": "src",
"noFallthroughCasesInSwitch": true,
"strictFunctionTypes": false
},
"include": ["src"]
}
poackage.json:
{
"name": "frontend-fe",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/preset-react": "^7.14.5",
"#types/prop-types": "^15.7.4",
"#types/react-router": "^5.1.16",
"axios": "^0.21.1",
"bootstrap": "^5.0.2",
"core-js": "^3.16.0",
"dotenv": "^10.0.0",
"embla-carousel": "^4.5.3",
"history": "^4.10.1",
"i18next": "^20.3.5",
"i18next-parser": "^4.3.0",
"loglevel": "^1.7.1",
"node-sass": "^6.0.1",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-bootstrap": "^2.0.0-beta.4",
"react-combine-reducers": "^1.1.1",
"react-dom": "^17.0.2",
"react-feather": "^2.0.9",
"react-i18next": "^11.11.4",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"styled-components": "^5.3.0"
},
"devDependencies": {
"#babel/core": "^7.15.0",
"#babel/eslint-parser": "^7.14.9",
"#rollup/plugin-babel": "^5.3.0",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^12.0.0",
"#types/node": "16.4.12",
"#types/react": "^17.0.15",
"#types/react-combine-reducers": "^1.0.0",
"#types/react-dom": "^17.0.9",
"#types/react-router-dom": "^5.1.8",
"#types/styled-components": "^5.1.12",
"#typescript-eslint/parser": "^4.29.0",
"eslint": "^7.32.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-airbnb-typescript": "^12.3.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"husky": "^7.0.1",
"lint-staged": "^11.1.1",
"prettier": "^2.3.2",
"typescript": "^4.3.5"
},
"resolutions": {
"styled-components": "^5"
},
"scripts": {
"start": "react-scripts start",
"dev": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"test:coverage": "react-scripts test --coverage --watchAll=false",
"lint": "eslint ./src/*.{ts,tsx} ./src/**/*.{ts,tsx} --max-warnings 0",
"generate:translations": "i18next 'src/**/*.{ts,tsx}' --config './i18next-parser.config.js'",
"checkUpdate": "npm-check-updates",
"updateConfig": "ncu-u"
},
"lint-staged": {
"src/**/!(*test).{js,jsx,ts,tsx,json}": [
"prettier --write",
"eslint --max-warnings 0",
"git add"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"commit-msg": "sh commit-message.sh"
}
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/index.tsx",
"!src/*.d.ts",
"!<rootDir>/node_modules/",
"!<rootDir>/path/to/dir/"
],
"coverageThreshold": {
"global": {
"branches": 90,
"functions": 90,
"lines": 90,
"statements": 90
}
}
}
}
pressing ctrl +s in vs-code inside of a .ts file and not formatting occurs.
what am I missing?
EDIT: vscode formatt-settings:
{
"window.zoomLevel": -1,
"typescript.updateImportsOnFileMove.enabled": "never",
"breadcrumbs.enabled": true,
"editor.tabSize": 2,
"editor.fastScrollSensitivity": 15,
"editor.mouseWheelScrollSensitivity": 5,
"diffEditor.ignoreTrimWhitespace": false,
"javascript.updateImportsOnFileMove.enabled": "always",
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[git-rebase]": {
"workbench.editor.restoreViewState": false
},
"explorer.confirmDelete": false,
"files.autoSave": "afterDelay",
"editor.formatOnSave": true,
"editor.fontWeight": null
}

Seems like your global Vscode settings contain rule, that override global defaultFormatter for typescript language.
Declare explicitly
"[typescript]": {
// override if setted per-language
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
Important note: If you have Vscode with version at least November 2021 (version 1.63) multiple language declaration style currently have lower priority than single style.
For example "[javascript][typescript]" not override "[typescript]"

Ensure that eslint.format.enable is set to true in your Visual Studio Code settings.json file.

Running into "Cannot find module" while configuring Babel + ESLint

I created a simple app a few weeks ago using create-react-app almost immediately I started getting this error in VSCode about it not being happy about something Babel related...which I ignored. My app works, I'm able to build and deploy to Heroku. And ESLint is also working. But the error keeps popping up in VSCode which has lead me down this rabbit hole of Babel and ESLint nightmares.
The error I was getting was regarding babel-eslint which I actually didn't have installed despite it being the parser named in my .eslintrc.json config. This is what my package.json file looked like prior to me making any changes:
{
"name": "new-rails-react-project",
"private": true,
"dependencies": {
"#babel/preset-react": "^7.13.13",
"#rails/actioncable": "^6.0.0",
"#rails/activestorage": "^6.0.0",
"#rails/ujs": "^6.0.0",
"#rails/webpacker": "5.4.0",
"axios": "^0.21.1",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"jquery": "^3.6.0",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"redbox-react": "^1.6.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12"
},
"version": "0.1.0",
"devDependencies": {
"eslint": "^7.27.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"prettier": "^2.3.0",
"webpack-dev-server": "^3.11.2"
},
"scripts": {
"start": "./bin/webpack-dev-server"
}
}
And this is what my .eslintrc.json file looked like:
{
"extends": [
"eslint:recommended",
"plugin:import/errors",
"plugin:react/recommended",
"plugin:jsx-a11y/recommended",
"prettier"
],
"plugins": ["react", "import", "jsx-a11y", "react-hooks"],
"rules": {
"react/prop-types": 0,
"react-hooks/rules-of-hooks": "error",
"no-console": "warn",
"no-dupe-keys": "warn",
"jsx-a11y/rule-name": 0,
"jsx-a11y/anchor-has-content": "warn"
},
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"ecmaFeatures": { "jsx": true }
},
"env": {
"es6": true,
"browser": true,
"node": true
},
"settings": {
"react": {
"version": "detect"
}
}
}
Since babel-eslint is deprecated I added #babel/eslint-parser and cannot for the life of me figure out how to make this work. Here are my current related config files:
package.json
"name": "ne-campground-reviews",
"private": true,
"dependencies": {
"#babel/plugin-transform-react-jsx": "^7.14.5",
"#babel/preset-react": "^7.13.13",
"#rails/actioncable": "^6.0.0",
"#rails/activestorage": "^6.0.0",
"#rails/ujs": "^6.0.0",
"#rails/webpacker": "5.4.0",
"axios": "^0.21.1",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"jquery": "^3.6.0",
"lightbox2": "^2.11.3",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.2.0",
"react-router-dom": "^5.2.0",
"redbox-react": "^1.6.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12"
},
"version": "0.1.0",
"devDependencies": {
"#babel/core": "^7.14.6",
"#babel/eslint-parser": "^7.14.7",
"#babel/eslint-plugin": "^7.14.5",
"eslint": "^7.29.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"prettier": "^2.3.0",
"webpack-dev-server": "^3.11.2"
},
"scripts": {
"start": "./bin/webpack-dev-server"
}
}
.eslintrc.json
{
"extends": [
"eslint:recommended",
"plugin:import/errors",
"plugin:react/recommended",
"plugin:jsx-a11y/recommended",
"prettier"
],
"plugins": ["react", "import", "jsx-a11y", "react-hooks", "#babel"],
"rules": {
"react/prop-types": 0,
"react-hooks/rules-of-hooks": "error",
"no-console": "warn",
"no-dupe-keys": "warn",
"jsx-a11y/rule-name": 0,
"jsx-a11y/anchor-has-content": "warn"
},
"parser": "#babel/eslint-parser",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"ecmaFeatures": { "jsx": true },
"requireConfigFile": false,
"babelOptions": {
"presets": ["#babel/preset-react"]
}
},
"env": {
"es6": true,
"browser": true,
"node": true
},
"settings": {
"react": {
"version": "detect"
}
}
}
And this is babel.config.js although I don't know if this file is still needed and/or configured correctly
module.exports = function(api) {
var validEnv = ['development', 'test', 'production']
var currentEnv = api.env()
var isDevelopmentEnv = api.env('development')
var isProductionEnv = api.env('production')
var isTestEnv = api.env('test')
if (!validEnv.includes(currentEnv)) {
throw new Error(
'Please specify a valid `NODE_ENV` or ' +
'`BABEL_ENV` environment variables. Valid values are "development", ' +
'"test", and "production". Instead, received: ' +
JSON.stringify(currentEnv) +
'.'
)
}
return {
presets: [
isTestEnv && [
'#babel/preset-env',
{
targets: {
node: 'current'
},
modules: 'commonjs'
},
'#babel/preset-react'
],
(isProductionEnv || isDevelopmentEnv) && [
'#babel/preset-env',
{
forceAllTransforms: true,
useBuiltIns: 'entry',
corejs: 3,
modules: false,
exclude: ['transform-typeof-symbol']
}
],
[
'#babel/preset-react',
{
development: isDevelopmentEnv || isTestEnv,
useBuiltIns: true
}
]
].filter(Boolean),
plugins: [
'babel-plugin-macros',
'#babel/plugin-syntax-dynamic-import',
isTestEnv && 'babel-plugin-dynamic-import-node',
'#babel/plugin-transform-destructuring',
[
'#babel/plugin-proposal-class-properties',
{
loose: true
}
],
[
'#babel/plugin-proposal-object-rest-spread',
{
useBuiltIns: true
}
],
[
'#babel/plugin-transform-runtime',
{
helpers: false,
regenerator: true,
corejs: false
}
],
[
'#babel/plugin-transform-regenerator',
{
async: false
}
],
isProductionEnv && [
'babel-plugin-transform-react-remove-prop-types',
{
removeImport: true
}
]
].filter(Boolean)
}
}
This error is what's currently popping up on things like import and module
Parsing error: Cannot find module '#babel/preset-react'
Require stack:
- /Users/maddoxgrey/Projects/ne-campground-reviews-v2/node_modules/#babel/core/lib/config/files/plugins.js
- /Users/maddoxgrey/Projects/ne-campground-reviews-v2/node_modules/#babel/core/lib/config/files/index.js
- /Users/maddoxgrey/Projects/ne-campground-reviews-v2/node_modules/#babel/core/lib/index.js

Vue.js - Invalid CSS after

I am trying to compile Vue.js based front-end application, but each time I do try to run it, I receive following error message:
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
^
Invalid CSS after "": expected 1 selector or at-rule, was "import './ProjectM"
in /app/src/components/ProjectMenuButton/ProjectMenuButton.vue (line 1, column 1)
I used to see this error before whenever I was including .css files with wrong path delivered.
The problem is that there literally has not been any .css file included into this file:
/app/src/components/ProjectMenuButton/ProjectMenuButton.vue:
<template>
<button :class="buttonClass" #click="changed()">
<h3>{{ this.ProjectMenuButton.text }}</h3>
</button>
</template>
<script>
export default {
name: "ProjectMenuButton",
props: {
ProjectMenuButton: {
type: Object,
default: () => ({
id: '',
text: '',
page: '',
class: 'btn'
})
},
ProjectMenuButtonClass: {
type: Object,
default: () => ({
class: ''
})
}
},
computed: {
buttonClass() {
if(typeof this.ProjectMenuButtonClass.class === undefined
|| this.ProjectMenuButtonClass.class === undefined)
return `ui basic button menu-button`;
else
return `ui basic button menu-button ${this.ProjectMenuButtonClass.class}`;
},
},
methods: {
changed: function(event) {
store.commit('current_menu', this.ProjectMenuButton.page);
}
}
};
</script>
I've tried different commands, like:
npm install --save-dev webpack
npm rebuild node-sass
But none of above worked.
Moreover, I do start Vue.js with following docker-container configuration:
frontend:
image: node:10-alpine
command: npm run serve
volumes:
- ./.env:/app/.env:ro
- ./frontend:/app
working_dir: /app
restart: on-failure
postgres:
image: postgres:10-alpine
volumes:
- postgres_data:/var/lib/postgresql/data
env_file: .env
package.json:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "npm i && vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"axios": "^0.18.0",
"register-service-worker": "^1.5.2",
"vue": "^2.5.17",
"vue-router": "^3.0.1",
"vue-raven": "^1.0.0",
"vue-analytics": "^5.16.0",
"vuex": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.0.1",
"#vue/cli-plugin-eslint": "^3.0.1",
"#vue/cli-plugin-pwa": "^3.0.1",
"#vue/cli-plugin-unit-jest": "^3.0.1",
"#vue/cli-service": "^3.0.1",
"#vue/eslint-config-standard": "^3.0.1",
"#vue/test-utils": "^1.0.0-beta.24",
"babel-core": "^6.26.3",
"babel-jest": "^23.4.2",
"node-sass": "^4.9.3",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.5.17"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"#vue/standard"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"jest": {
"moduleFileExtensions": [
"js",
"jsx",
"json",
"vue"
],
"transform": {
"^.+\\.vue$": "vue-jest",
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
"^.+\\.jsx?$": "babel-jest"
},
"moduleNameMapper": {
"^#/(.*)$": "<rootDir>/src/$1"
},
"snapshotSerializers": [
"jest-serializer-vue"
],
"testMatch": [
"<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))"
]
}
}

Babel transform import statements

I have an ASP.NET MVC solution with my front-end scripts in TypeScript. I am trying to use webpack and babel with ts-loader so I can develop with es2016 but have babel transform to es5 and be able to run and debug in IE from Visual Studio. However I find that the output js is not transformed as I expect. For example the following statements in my ts appear in my resulting js, which are not es5:
import * as moment from 'moment';
import { classes } from './order';
Here is my config:
.babelrc
{
"presets": ["es2015"]
}
webpack.config.js
var path = require('path');
module.exports = {
context: path.join(__dirname, 'Scripts'),
entry: ['babel-polyfill', './pos.ts'],
output: {
path: path.join(__dirname, 'Scripts'),
filename: '[name].js'
},
resolve: {
extensions: ['.js', '.ts']
},
module: {
loaders: [{
test: /\.ts$/,
loaders: ['babel-loader', 'ts-loader'],
exclude: /(node_modules|bower_components)/
}]
},
devtool: 'inline-source-map'
};
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"noImplicitAny": true,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es2016",
"module": "es2015",
"lib": [ "dom", "es2015", "es2016" ],
"allowSyntheticDefaultImports": true,
"moduleResolution": "node",
"preserveConstEnums": true,
"skipLibCheck": true
},
"include": [
"node_modules/#types/**/*.d.ts",
"Scripts/**/*.ts"
]
}
package.json
{
"version": "1.0.0",
"name": "foo",
"readme": "README.md",
"description": "foo",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-bower": "^0.0.13",
"gulp-clean-css": "^3.4.1",
"gulp-concat": "^2.6.1",
"gulp-copy": "^1.0.0",
"gulp-less": "^3.3.0",
"gulp-rimraf": "^0.2.1",
"gulp-sass": "^3.1.0",
"gulp-shell": "^0.6.3",
"gulp-sourcemaps": "^2.6.0",
"gulp-tsc": "^1.3.2",
"gulp-uglify": "^3.0.0",
"gulp-util": "^3.0.8",
"merge-stream": "^1.0.1",
"node-sass": "^4.5.3",
"run-sequence": "^1.2.2",
"ts-loader": "^2.3.2",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.6.1",
"webpack-notifier": "^1.5.0"
},
"dependencies": {
"#types/jquery": "^2.0.46",
"#types/bootstrap-touchspin": "",
"#types/maskedinput": "",
"#types/bootstrap-select": ""
},
"scripts": {
"build": "webpack",
"watch": "webpack --watch",
"start": "webpack-dev-server --hot --inline"
}
}
Webpack appears to be running successfully in that there are no errors and js is created from my ts. I think that Babel is being invoked because if I put in an invalid preset I get an error. However as noted above it seems like Babel is not transforming to es5. I have tried other presets like env and 2016. What am I missing?