【JavaScript模块化】6-ES6模块化教程

蔚落 2024-04-03 12:48 86阅读 0赞

### ES6-Babel-Browserify使用教程 ###

1.  定义package.json文件

{
        
      "name" : "es6-babel-browserify",
      "version" : "1.0.0"
    }

1.  安装`babel-cli`, `babel-preset-es2015`和`browserify`
    
    `npm install babel-cli browserify -g`
    
    `npm install babel-preset-es2015 --save-dev`
2.  定义.babelrc文件
    
        {
              
        "presets": ["es2015"]
        }
3.  编码

*  js/src/module1.js
    
        export function foo() {
              
          console.log('module1 foo()');
        }
        export let bar = function () {
              
          console.log('module1 bar()');
        }
        export const DATA_ARR = [1, 3, 5, 1]
 *  js/src/module2.js
    
        let data = 'module2 data'
        
        function fun1() {
              
          console.log('module2 fun1() ' + data);
        }
        
        function fun2() {
              
          console.log('module2 fun2() ' + data);
        }
        
        export {
              fun1, fun2}
 *  js/src/module3.js
    
        export default {
              
          name: 'Tom',
          setName: function (name) {
              
            this.name = name
          }
        }
 *  js/src/app.js
    
        import {
              foo, bar} from './module1'
        import {
              DATA_ARR} from './module1'
        import {
              fun1, fun2} from './module2'
        import person from './module3'
        
        import $ from 'jquery'
        
        $('body').css('background', 'red')
        
        foo()
        bar()
        console.log(DATA_ARR);
        fun1()
        fun2()
        
        person.setName('JACK')
        console.log(person.name);

1.  编译
    
    1.  使用Babel将ES6编译为ES5代码(但包含CommonJS语法) :`babel js/src -d js/lib`
    2.  使用Browserify编译js : browserify js/lib/app.js -o js/lib/bundle.js
2.  页面中引入测试

1.  引入第三方模块(jQuery)  
    1). 下载jQuery模块:
    
     *  npm install jquery@1 --save  
        2). 在app.js中引入并使用
    
        import $ from 'jquery'
        $('body').css('background', 'red')