Thêm mô đun nút vào ứng dụng ember CLI

Question

Tôi muốn sử dụng mô-đun Node.js này https://www.npmjs.com/package/remarkable-regexp trong ứng dụng Ember-CLI của tôi.

Làm cách nào để cung cấp ứng dụng này cho ứng dụng Ember?

Tôi đã thử nó bằng cách thêm này đến Brocfile.js

app.import('node_modules/remarkable-regexp/index.js'); 

nhưng nó không thành công như thế này:

Path or pattern "node_modules/remarkable-regexp/index.js" did not match any files

Answer 1

Kể từ remarkable-regexp là một mô-đun NPM, tôi tin rằng cách tốt nhất để tích hợp nó với ember -cli bằng cách sử dụng ember-browserify.

Trong ứng dụng ember-cli của bạn, bạn có thể cài đặt addon bằng cách chạy npm install --save-dev ember-browserify

Vì vậy, bạn có thể nhập các module sử dụng ES6 nhập khẩu bằng cách đặt trước nó với npm:

import Remarkable from 'npm:remarkable'; 
import Plugin from 'npm:remarkable-regexp'; 

var plugin = Plugin(
    // regexp to match 
    /@(\w+)/, 

    // this function will be called when something matches 
    function(match, utils) { 
    var url = 'http://example.org/u/' + match[1] 

    return '<a href="' + utils.escape(url) + '">' 
     + utils.escape(match[1]) 
     + '</a>' 
    } 
) 

new Remarkable() 
    .use(plugin) 
    .render("hello @user") 

// prints out: 
// <p>hello <a href="http://example.org/u/user">user</a></p> 

Answer 2

Tiếng ồn browserify có lẽ là phương pháp ưa thích, nhưng tôi đã tấn công nó bằng cách tạo một liên kết tượng trưng trong thư mục của nhà cung cấp như sau:

$ npm install --save-dev css.escape 
$ cd vendor 
$ ln -s ../node_modules/css.escape/css.escape.js css.escape.js 

then

// ember-cli-build.js 
app.import('vendor/css.escape.js'); 

Answer 3

ember-browserify là một lựa chọn tuyệt vời để sử dụng trong các ứng dụng, và có work being done để cố gắng cho phép Ember CLI để nhập khẩu các gói NPM mà không cần bất kỳ sự trợ giúp thêm gì cả. Tuy nhiên, nếu bạn đang cố gắng để làm cho công việc này trong cả hai addons và ứng dụng bạn có thể có một cách tiếp cận hơi khác nhau, đó là để tự sửa đổi các chuỗi xây dựng bông cải xanh để bao gồm gói Node của bạn.

Đây là một ví dụ nhanh như thế nào điều này có thể được thực hiện trong tập tin index.js của một addon:

var path = require('path'); 
var mergeTrees = require('broccoli-merge-trees'); 
var Funnel = require('broccoli-funnel'); 

module.exports = { 
    name: 'my-addon', 

    treeForVendor: function(tree) { 
    var packagePath = path.dirname(require.resolve('node-package')); 
    var packageTree = new Funnel(this.treeGenerator(packagePath), { 
     srcDir: '/', 
     destDir: 'node-package' 
    }); 
    return mergeTrees([tree, packageTree]); 
    }, 

    included: function(app) { 
    this._super.included(app); 

    if (app.import) { 
     this.importDependencies(app); 
    } 
    }, 

    importDependencies: function(app) { 
    app.import('vendor/node-package/index.js'); 
    } 
}; 

Một kỹ thuật tương tự có thể được sử dụng cho các ứng dụng tiêu chuẩn. Một lần nữa, phương pháp này sẽ được thay thế ngay khi nhóm Ember CLI thêm hỗ trợ cho các mô-đun Nút, vì vậy hãy cố gắng sử dụng nó một cách tiết kiệm và cập nhật với Ember CLI!

Answer 4

Cập nhật bạn ember-cli thành v2.15.0-beta.1. Phiên bản mới cho phép bạn sử dụng app.import với node_modules

Để biết thêm thông tin kiểm tra https://github.com/ember-cli/ember-cli/pull/7045

Answer 5

Tính đến Ember-CLI 2.15.0, bạn có thể bây giờ import node modules directly. Để chứng minh, đảm bảo ứng dụng của bạn trên Ember-CLI 2.15.0, sau đó thử cài đặt Moment.js:

1. yarn add moment
2. Thêm app.import('node_modules/moment/moment.js') đến file ember-cli-build.js của bạn.
3. Bây giờ bạn có thể truy cập thời điểm qua đối tượng window: window.moment.
4. (tùy chọn) Nếu bạn muốn có thể import moment from 'moment', bạn có thể tạo shim nhà cung cấp.Xem this link để biết chi tiết.

Điều này sẽ không hoạt động đối với các mô-đun nút không cung cấp một gói JavaScript duy nhất (bạn sẽ cần phải gói theo các phương pháp được mô tả trong các nhận xét khác), nhưng nó đã được cải thiện rất nhiều.