ứng dụng không được xác định sau khi bundling

Question

Tôi đang chạy browserify trên mã của tôi, nó là như sau:

import './app'; 

//——————————————————————————————————————————————————// 
// Components 
//——————————————————————————————————————————————————// 

import './components/_ntToggleClass'; 

ứng dụng chỉ đơn giản là

const app = angular.module('app', []); 

trong khi tập tin trong components là, tốt, thành phần. Nhưng họ đang sử dụng đã nói ở trên app:

app.directive('ntToggleClass',() => { 
    ... } 

Khi tôi đặt mọi thứ vào một tệp bằng tay, tất cả đều hoạt động. Nhưng sau khi tôi sử dụng browserify về điều này, tôi đang nhận được

Uncaught ReferenceError: app is not defined

Khi tôi nhìn vào bên trong mã, cả hai var app và chỉ thị đều có.

Answer 1

Một người bạn của tôi đến với sự giúp đỡ ;-)

Tôi đang sử dụng Babel (Tôi nghĩ thas là hiển nhiên, kể từ khi tôi sử dụng import không require) cho mã hóa của tôi (Babelify với es2015, để được chính xác), vì vậy, như tôi có import, tôi cần export quá.

Giải pháp rất đơn giản, tất cả những gì phải làm là đặt

export default app; 

ở phần cuối của tập tin app.js tôi và sau đó import nó bằng lệnh

import app from '../app'; 

vào chỉ thị của tôi/linh kiện, vv

Answer 2

Tôi đã tát cùng một mẫu nhanh chóng trên github. Điều này sẽ cung cấp cho bạn một kho lưu trữ đang chạy trình duyệt.

Tôi đã xóa nhận xét trước đó của mình, vì tôi nghĩ rằng repo phải trả lời câu hỏi của bạn.

chỉnh sửa: Tôi nghĩ rằng bây giờ tôi đã có câu hỏi của bạn, bạn đang cố tạo một biến toàn cầu app để chỉ được sử dụng trong mỗi tệp khác? Điều này là không thể khi sử dụng browserify, bất kỳ biến nào không phải là required trong tệp của bạn sẽ trả về undefined.

Khi sử dụng trình duyệt, chỉ cần yêu cầu bất cứ điều gì bạn cần.

Answer 3

Tôi nghĩ rằng đó là về thứ tự định nghĩa.

const app = angular.module('app', []); phần này cần được đầu dưới phần:

app.directive('ntToggleClass',() => { 
    ... }