Last active
October 21, 2023 14:04
-
-
Save c9s/8e2e621d6cfc4e7f8e778d9a592e7f1b to your computer and use it in GitHub Desktop.
webpack + babel + typescript + es6 - total solutions!
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"presets": ["es2015"], | |
"plugins": ["transform-runtime"] | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
npm install babel-core@6 --save-dev | |
npm install babel-loader@6 --save-dev | |
npm install babel-runtime@6 --save-dev | |
npm install babel-preset-es2015@6 --save-dev | |
npm install babel-preset-react@6 --save-dev | |
npm install babel-plugin-transform-runtime@6 --save-dev | |
npm install babel-plugin-transform-es2015-modules-commonjs@6 --save-dev | |
npm install babel-plugin-transform-object-assign@6 --save-dev | |
npm install babel-polyfill --save-dev | |
sudo npm install typings -g | |
typings install |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"devDependencies": { | |
"async": "^1.2.0", | |
"babel-core": "^6.9.0", | |
"babel-loader": "^6.2.4", | |
"babel-plugin-transform-es2015-modules-commonjs": "^6.8.0", | |
"babel-plugin-transform-object-assign": "^6.8.0", | |
"babel-plugin-transform-runtime": "^6.9.0", | |
"babel-polyfill": "^6.9.0", | |
"babel-preset-es2015": "^6.9.0", | |
"babel-preset-es2015-native-modules": "^6.6.0", | |
"babel-preset-react": "^6.5.0", | |
"babel-preset-stage-0": "^6.5.0", | |
"babel-runtime": "^6.9.0", | |
"file-loader": "^0.8.1", | |
"object-assign": "^4.0.1", | |
"uglify-loader": "^1.3.0", | |
"webpack": "^1.13.1", | |
"webpack-closure-compiler": "^2.0.2", | |
"webpack-dev-server": "^1.14.1", | |
"webpack-stream": "^3.2.0", | |
"ts-loader": "^0.8.2" | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"compilerOptions": { | |
"target": "es6", | |
"allowSyntheticDefaultImports": true, | |
"sourceMap": true, | |
"allowJs": true, | |
"outDir": "build" | |
}, | |
"exclude": ["node_modules"], | |
"files": ["typings/index.d.ts", "entry.ts"] | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"globalDependencies": { | |
"d3": "registry:dt/d3#0.0.0+20160514171929", | |
"jquery": "registry:dt/jquery#1.10.0+20160417213236", | |
"mocha": "registry:dt/mocha#2.2.5+20160317120654" | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var path = require('path'); | |
var nodeModulesPath = path.resolve(__dirname, 'node_modules'); | |
var webpack = require('webpack'); | |
module.exports = { | |
'entry': { | |
// your entry file file (entry.ts or entry.js) | |
'd3metric': ['./entry'], | |
'd3metric.demo': ['./demo/demo.entry'], | |
}, | |
'output': { | |
'path': __dirname, | |
'filename': '[name].js' | |
}, | |
'module': { | |
'loaders': [ | |
// ts-loader: convert typescript (es6) to javascript (es6), | |
// babel-loader: converts javascript (es6) to javascript (es5) | |
{ | |
'test': /\.tsx?$/, | |
'loaders': ['babel-loader','ts-loader'], | |
'exclude': [/node_modules/,nodeModulesPath] | |
}, | |
// babel-loader for pure javascript (es6) => javascript (es5) | |
{ | |
'test': /\.(jsx?)$/, | |
'loaders': ['babel'], | |
'exclude': [/node_modules/,nodeModulesPath] | |
} | |
] | |
}, | |
'externals': { | |
// don't bundle the 'react' npm package with our bundle.js | |
// but get it from a global 'React' variable | |
'react': 'React' | |
}, | |
'plugins': [], | |
'resolve': { | |
'root': [path.resolve('./src')], | |
'extensions': ['', '.js', '.jsx', '.ts', '.tsx'], | |
// this is only required when we "import 'jquery'" | |
// 'alias': { 'jquery': path.join(__dirname, "vendor", "jquery-2.2.0.min.js") } | |
} | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
So really interesting to read the presumptions. Then I want to create clarity. So TypeScript is meant to write versions with higher JavaScript (ES6 or higher). Babel uses it to compile back into a javascript which most browsers understand, e.g. ES5 but I would not specify an explicit version but specify how many versions he should compile back or make compatible.
Show my tutorial:
JavaScript scales with TypeScript
Or use my NPM package and generate:
Generator Webpack Preact (NPM)
Generator Webpack Preact (Github)
tsconfig.json
Here is the target for TypeScript and is it ES6
.babelrc
And here is ES5
But we can do this:
.babelrc
Or this
package.json
Of course you should not do that in runtime, but in your development environment you should not have any performance losses.