Skip to content

Instantly share code, notes, and snippets.

@SeanJM SeanJM/.babelrc
Last active Jun 13, 2017

Embed
What would you like to do?
TypeScript, VueJS and JSX webpack configuration
{
"presets": [],
"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs"]
}
npm i -S \
@types/core-js \
vue \
typescript \
ts-loader \
webpack \
babel \
babel-core \
babel-loader \
babel-plugin-syntax-jsx \
babel-plugin-transform-es2015-modules-commonjs \
babel-plugin-transform-vue-jsx \
babel-helper-vue-jsx-merge-props
{
"compilerOptions": {
"jsx": "preserve",
"module": "commonjs",
"moduleResolution": "node",
"outDir": "bin/",
"sourceMap": true,
"removeComments": true,
"target": "es5"
},
"include": [
"src/**/*"
],
"files": [
"src/app.tsx"
]
}
module.exports = {
entry: "./src/app.tsx",
output: {
filename: "bin/bundle.js"
},
resolve: {
// Add '.ts' and '.tsx' as a resolvable extension.
extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},
module: {
loaders: [
// It's important to run 'babel' first this will avoid a compilation error
{ test: /\.tsx?$/, loader: "babel" },
// Run ts loader to transform our typescript into JS
{ test: /\.tsx?$/, loader: "ts-loader" }
]
},
// If you want to load 'vue' as an external, and not include it in your bundle
// simply add it to the array.
externals : []
};
@SeanJM

This comment has been minimized.

Copy link
Owner Author

commented Nov 15, 2016

It should be noted, that even though webpack will take in the entry point and the application will compile without errors, linting the code will throw warnings about the --jsx flag missing unless the entry point is supplied in the tsconfig.json.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.