客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
开源软件名称（OpenSource Name）：AngularClass/ES6-build-tools开源软件地址(OpenSource Url)：https://github.com/AngularClass/ES6-build-tools开源编程语言(OpenSource Language)：JavaScript 96.1%开源软件介绍(OpenSource Introduction)：
ES6 Build toolsLearn how to set up an ES6 environment with Webpack, Gulp and Babel and practice building your own. You can use this environment with Angular or any other framework. Read through the comprehensive introduction and then hit the exercises. IntroductionBefore we can start building our application, we have to make sure our environment is ready to handle ES6. Even though the ES6 spec has officially been approved, it is far from standard in most browsers today. ES6 brings a ton of new stuff, and it's going to take quite some time for all the different JavaScript environments to implement the new standard. But that doesn't mean we have to wait for them to write ES6 today! With the help of transpilers like Babel and Traceur, we can write ES6 code that gets compiled down to the widely implemented ES5 that you are already comfortable with. ES6 is awesome and we want to write our apps with it. Babel has a sweet REPL that you can play around with, but of course we can't write applications in a REPL. What are we to do? The goal of this section is to not only learn how we can use these transpilers to write ES6 code today, but also how to use build tools to entirely automate this book keeping process. WebpackWebpack is really convenient because it not only lets us transpile from ES6 to ES5 with Babel, but it also lets us organize our client-side code in modules. Organizing our code in modules is a bit different than the traditional style. Gone are the days of endless Webpack allows us to:
Many of these things you might have done with another build tool like Gulp or Grunt. It's recommended that you leave any task that touch files (transpilation, minification, etc) to Webpack and use your other build system to orchastrate other automation. Using WebpackInstall WebpackInstall Webpack with Bundle your first appCreate var greeting = 'It works!';
alert(greeting);Create <html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>Run the following:
Open Add another file to our appCreate // This is Node's module syntax
module.exports = 'It works from content.js';Update - var greeting = 'Hello world!';
+ var greeting = require('./content');
alert(greeting);Recompile with:
Update your browser window and you should see the alert Add ES6 to our appWe want to add ES6 to our application. Webpack can only handle ES5 natively, so we need the babel-loader to process js files written with ES6 down to ES5. We can install any of the webpack loaders through Run ES6ify // This is ES6 module syntax now
export default 'It works from content.js'ES6ify import greeting from './content'
// We can use any ES6 syntax supported by Babel here now!
alert(`${greeting} and with ES6!!`)Now, we can use a special flag in our CLI to send all Update your browser window and you should see the alert We now have a totally working, modular, ES6 app!! GulpGulp is a generic JavaScript task runner that goes well beyond bundling. Gulp can handle many aspects of development. It can serve our files, watch our files and run commands if any of them change, create directories with boilerplate code, and even deploy our app. Webpack can do a lot of tasks Gulp can. For our ES6 environment, we're going to a basic Gulpfile to serve our app and reload when a file changes. Gulp runs on plugins. If you want to automate anything, run an We're going to focus on a couple of basics: serving and watching. Set Up Gulp
var gulp = require('gulp');
gulp.task('default', function() {
// This task will execute when you run `gulp`
});
The default task will run and do nothing! To run individual tasks, use Serve our clientWe're going to use Browsersync to serve our client (not actually a gulp specific plugin). Install Browsersync: Update var gulp = require('gulp');
var serve = require('browser-sync');
gulp.task('serve', function() {
// This will serve our client folder on localhost:3000
serve({
port: 3000,
open: false,
server: {
baseDir: 'client'
}
});
});We've defined a new task so when we run This is only semi useful, because right now if we make any changes to our app we have to run our webpack command: Watching filesGulp also has the power to watch your files for any changes, and run a command whenever it notices one of these changes. It doesn't even need a plugin. Let's do it! Update var gulp = require('gulp');
var serve = require('browser-sync');
// ... previously defined tasks
gulp.task('watch', function() {
gulp.watch('client/**/*.{js,css,html}', [serve.reload])
});This 'glob' notation is a nice wildcard notation for pathnames that is common in gulp tasks. This task says: watch for any .js, .css, or .html file at any level in our 'client' directory and run the array of commands that follows - in this case, just reload our server. Combine tasks togetherA gulp task can consist of many other gulp tasks. By default, tasks passed in using array notation (like Sometimes this is not wanted. For example, if we wanted to do something crazy like fully transpile all our ES6 code into ES5 before it is served, we need to guarantee the entire build step is completed before the serve task.
Install run-sequence: Update var gulp = require('gulp');
var serve = require('browser-sync');
var sync = require('run-sequence');
// ... previously defined tasks
// new default task
gulp.task('default', function(done) {
sync('serve', 'watch', done);
});Now whenever we run ExercisesIt's your turn! We've only just scratched the surface of what our build tools can do. Complete the following tasks to make your build tools even more useful. Solutions to the Basic Requirements are on the solution branch. There are no solutions for the Extra Credit or Nightmare Mode challenges. Use the lessons learned from the Basic Requirements to figure these out on your own! Basic Requirements
Extra Credit
Nightmare Mode
Support and Questions
enjoy -- AngularClass
|
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
六六分期app的软件客服如何联系？不知道吗？加qq群【895510560】即可！标题：六六分期
今天小编告诉大家如何处理win10系统火狐flash插件总是崩溃的问题，可能很多用户都不知
今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置，可能很多用户都不知道
今天小编告诉大家如何对win10系统电脑设置节能降温的设置方法，想必大家都遇到过需要
我们在使用xp系统的过程中,经常需要对xp系统无线网络安装向导设置进行设置，可能很多
今天小编告诉大家如何处理win7系统玩cf老是与主机连接不稳定的问题，可能很多用户都不
电脑对日常生活的重要性小编就不多说了，可是一旦碰到win7系统设置cf烟雾头的问题，很
我们在日常使用电脑的时候，有的小伙伴们可能在打开应用的时候会遇见提示应用程序无法
今天小编告诉大家如何对win7系统打开vcf文件进行设置，可能很多用户都不知道怎么对win
今天小编告诉大家如何对win10系统s4开启USB调试模式进行设置，可能很多用户都不知道怎
请发表评论