Cách biên dịch một dự án đúng cách với Babel và Grunt

Tôi đang cố gắng chơi với Babel, nhưng nó không hoạt động tốt cho tôi.Cách biên dịch một dự án đúng cách với Babel và Grunt

dự án của tôi là đơn giản

|-project/ 
|---src/ 
|-----index.html 
|-----main.js 
|-----module.js 
|---Gruntfile.js 
|---package.json

index.html

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title>Test</title> 
    <script src="main.js" type="application/javascript"></script> 
</head> 
<body> 
<p>Simple html file.</p> 
</body> 
</html>

main.js

import * as math from "./module"; 

async function anwser() { 
    return 42; 
} 

(function main() { 
    anwser().then((v) => { 
     console.info(v); 
    }); 

    console.log(math.sum(5, 5)); 
})();

module.js

export function sum(x, y) { 
    return x + y; 
}

Gruntfile.js

module.exports = function(grunt) { 

    grunt.initConfig({ 
     "babel": { 
      "options": { 
       "sourceMap": true, 
       "experimental": true 
      }, 
      dist: { 
       files: [{ 
        "expand": true, 
        "cwd": "src/", 
        "src": ["**/*.js"], 
        "dest": "build/", 
        "ext": ".js" 
       }] 
      } 
     }, 
     htmlmin: { 
      dist: { 
       options: { 
        removeComments: true, 
        collapseWhitespace: true 
       }, 
       files: [{ 
        "expand": true, 
        "cwd": "src/", 
        "src": ["**/*.html"], 
        "dest": "build/", 
        "ext": ".html" 
       }] 
      } 
     }, 
     watch: { 
      scripts: { 
       files: 'src/*.js', 
       tasks: ["babel"] 
      }, 
      html: { 
       files: 'src/*.html', 
       tasks: ["htmlmin"] 
      } 
     } 
    }); 

    grunt.loadNpmTasks('grunt-babel'); 
    grunt.loadNpmTasks('grunt-contrib-watch'); 
    grunt.loadNpmTasks('grunt-contrib-htmlmin'); 

    grunt.registerTask("default", ["babel", "htmlmin"]); 
};

tôi chạy grunt, tất cả mọi thứ biên dịch. Nhưng tôi không thể sử dụng có kết quả mong đợi.

Trước tiên, trình duyệt nói require is not defined, vì vậy tôi thêm require.js vào HTML của mình.

Sau đó, tôi nhận được Error: Module name "module" has not been loaded yet for context: _. Use require([]) http://requirejs.org/docs/errors.html#notloaded

Tôi hơi bối rối về tất cả những điều này. Làm thế nào tôi có thể làm cho mã của tôi hoạt động?

Nguồn

2015-02-22 Druxtan

Để mở rộng về câu trả lời veg_prog, bạn nên sử dụng một cái gì đó giống như Browserify nếu bạn muốn sắp xếp mã của mình thành các mô-đun. Trình duyệt có thể được sử dụng với Grunt qua grunt-browserify và Babel có thể được sử dụng với Browserify qua babelify.

Tôi đã điều chỉnh một số tập tin của bạn để cho bạn thấy làm thế nào nó có thể được thực hiện:

index.html

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title>Test</title> 
    <script src="bundle.js" type="application/javascript"></script> 
</head> 
<body> 
    <p>Simple html file.</p> 
</body> 
</html>

chính.js

import "babelify/polyfill"; // Needed for Babel's experimental features. 
import * as math from "./module"; 

async function anwser() { 
    return 42; 
} 

(function main() { 
    anwser().then((v) => { 
    console.info(v); 
    }); 

    console.log(math.sum(5, 5)); 
})();

Gruntfile.js

module.exports = function(grunt) { 

    grunt.initConfig({ 
    browserify: { 
     dist: { 
     options: { 
      transform: [["babelify", { "stage": 0 }]] 
     }, 
     files: { 
      "build/bundle.js": "src/main.js" 
     } 
     } 
    }, 
    htmlmin: { 
     dist: { 
     options: { 
      removeComments: true, 
      collapseWhitespace: true 
     }, 
     files: [{ 
      "expand": true, 
      "cwd": "src/", 
      "src": ["**/*.html"], 
      "dest": "build/", 
      "ext": ".html" 
     }] 
     } 
    }, 
    watch: { 
     scripts: { 
     files: "src/*.js", 
     tasks: ["browserify"] 
     }, 
     html: { 
     files: "src/*.html", 
     tasks: ["htmlmin"] 
     } 
    } 
    }); 

    grunt.loadNpmTasks("grunt-browserify"); 
    grunt.loadNpmTasks("grunt-contrib-watch"); 
    grunt.loadNpmTasks("grunt-contrib-htmlmin"); 

    grunt.registerTask("default", ["browserify", "htmlmin"]); 
};

package.json

{ 
    "devDependencies": { 
    "babelify": "6.0.1", 
    "grunt": "0.4.5", 
    "grunt-browserify": "3.6.0", 
    "grunt-contrib-htmlmin": "0.4.0", 
    "grunt-contrib-watch": "0.6.1" 
    } 
}

Nguồn

2015-04-03 04:50:41

Trước tiên, trình duyệt yêu cầu không được xác định, vì vậy tôi thêm require.js vào HTML của mình.

Tôi không nghĩ rằng việc thêm require.js sẽ là giải pháp. Trong ngữ cảnh này yêu cầu cú pháp kiểu nút: (https://github.com/substack/browserify-handbook#user-content-require).

Trình duyệt là trình tải mô-đun nhưng hoạt động khác với requirej. Có bản phân phối babel cho các yêu cầu, (https://github.com/mikach/requirejs-babel) nhưng tôi khuyên bạn nên sử dụng browserify.

Trong một thiết lập, nơi babel đang làm việc với browserify, một cái gì đó như thế này

import $ from'jquery';

sẽ trở thành một cái gì đó như thế này

var $ = require('jquery');

Nguồn

2015-03-28 06:24:53

Babel sử dụng 'chung' theo mặc định. Điều đó không làm việc cho requirejs. Vì vậy, hãy thay đổi mô-đun thành 'amd'.

"babel": { 
    "options": { 
     "sourceMap": true, 
     "experimental": true, 
     "modules": "amd"  //This is the line to be added. 
    }, 
    dist: { 
     files: [{ 
      "expand": true, 
      "cwd": "src/", 
      "src": ["**/*.js"], 
      "dest": "build/", 
      "ext": ".js" 
     }] 
    } 
}

Cập nhật cho Babel6. Xem thêm http://babeljs.io/docs/plugins/transform-es2015-modules-amd/ và https://babeljs.io/docs/plugins/

"babel": { 
    "options": { 
     "sourceMap": true, 
     "experimental": true, 
     "plugins": ["transform-es2015-modules-amd"] //This is the line to be added. 
    }, 
    dist: { 
     files: [{ 
      "expand": true, 
      "cwd": "src/", 
      "src": ["**/*.js"], 
      "dest": "build/", 
      "ext": ".js" 
     }] 
    } 
}

Nguồn

2015-05-22 20:57:19

Hoặc thậm chí có thể tốt hơn: 'umd' –

Cách biên dịch một dự án đúng cách với Babel và Grunt

Trả lời

Các vấn đề liên quan