-
-
Save c9s/8e2e621d6cfc4e7f8e778d9a592e7f1b to your computer and use it in GitHub Desktop.
{ | |
"presets": ["es2015"], | |
"plugins": ["transform-runtime"] | |
} |
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 |
{ | |
"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" | |
} | |
} |
{ | |
"compilerOptions": { | |
"target": "es6", | |
"allowSyntheticDefaultImports": true, | |
"sourceMap": true, | |
"allowJs": true, | |
"outDir": "build" | |
}, | |
"exclude": ["node_modules"], | |
"files": ["typings/index.d.ts", "entry.ts"] | |
} |
{ | |
"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" | |
} | |
} |
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") } | |
} | |
}; |
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
{
"compilerOptions": {
"target": "es6",
},
}
.babelrc
And here is ES5
{
"presets": ["es2015"],
}
But we can do this:
.babelrc
{
"presets": [
[
"env",
{
"targets": {
"browsers": [
"last 2 versions",
"safari >= 7"
]
}
}
]
],
},
Or this
package.json
"babel": {
"presets": [
[
"env",
{
"targets": {
"browsers": [
"last 2 versions",
"safari >= 7"
]
}
}
]
],
},
Of course you should not do that in runtime, but in your development environment you should not have any performance losses.
to avoid 'nodejs module not found' you need to install @types/node (https://stackoverflow.com/questions/43804624/i-cant-import-node-modules-from-typescript-in-node-js)