-
-
Save joe11051105/a8de15f2e8f337e64bf23fa2ce8fa99b to your computer and use it in GitHub Desktop.
webpack + babel + typescript + es6 - total solutions!
This file contains 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
Show hidden characters
{ | |
"presets": ["es2015"], | |
"plugins": ["transform-runtime"] | |
} |
This file contains 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 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 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 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 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